react-9 state ， props 和 map 循环渲染的简单描述

之前简单学习了react 组件是怎么写的，比如下面这个：

import React from 'react';
import './intro.css';

export default class Intro extends React.Component {
    render(){
        return(
            <div>我是简介页面</div>
        )
    }
}

上面这个组件我们仅仅在组件内部加了一个 render() 方法，然后写了一点页面内容，最后这个页面就只是一个可以展示的

页面，没有任何的数据；

涉及到数据，我们利用react 父组件传值给子组件的例子来说明 state 和 props ,顺便使用一下 map 方法；

第一步，我们创建父组件 func.js，我们先看下下面的代码，我们首先引入了 React ，这个父组件的样式文件 func.css

和子组件 Datame ；

然后我们在组件中显示的声明了 constructor ，如果你还不了解 constructor 和 super 方法，

参考这个：http://www.softwhy.com/article-9320-1.html

http://www.softwhy.com/article-9690-1.html

我们在这个父组件的 constructor 中先使用 super() 搞定 this 的指向问题；

然后定义一个数组 cutme ；

最后把这个数组设置为 state 对象的属性 abc ；

我们在render() 函数中引入子组件 <Datame id = { this.state.abc }/>

这样这个子组件就会引入到父组件中，我们把父组件中设置的 abc 通过一个 id 传递给子组件；

你可以写任何名字，id 或者 name 或者 data ，随便起，没有限制；

import React from 'react';
import './func.css';
import Datame from '../Datame/datame';

export default class Func extends React.Component {
    constructor(){
        super();
        let cutme = [{name:'第一个数值'},{name:'第二个数值'},{name:'第三个数值'}]
        this.state = {
            abc: cutme 
        }
    }
    render(){
        return(
            <div>
                <p>我是功能页面</p>
                <Datame id={this.state.abc} />
            </div>
        )
    }
}

上面父组件已经传值了，我们看下子组件中是如何接受这个传递的值的：

我们在组件的 constructor 中增加了参数 props ，我们通过这个 props参数就可以接收到父组件传递的值；

我们在父组件中传递的参数的名字是 id ，所以这里我们通过 props.id 就可以获取到传递的参数；

子组件中获取到这个参数之后，我们可以先用state 存储一下这个传递来的参数；

这个参数是个数组，元素多，不是单一的元素，所以我们可以利用map方法循环渲染出所有的数据，如下代码，

我们在循环的时候，要给循环的标签，我这里是 <p> 增加 key 的设置，这个需要注意下；

import React from 'react';
import './datame.css';

export default class Datame extends React.Component{
    constructor(props){
        super();
        console.log(props);
        this.state = {
            datame: props.id
        }
    }

    render(){
        return(
            <div className="datame">
                <p>功能页面的子组件</p>
                {this.state.datame.map((item,index)=>{
                    return <p key={index} className="datame-content">{item.name}</p>
                })}
            </div>
        )
    }
}

最后是这么一个效果，父组件中引入了子组件，父组件传递的参数通过map 循环渲染成相应的样式；

react-9 state ， props 和 map 循环渲染的简单描述

猜你喜欢