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

港控/mmm° 2022-03-18 10:26 422阅读 0赞

之前简单学习了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-9320-1.html]

[http://www.softwhy.com/article-9690-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 循环渲染成相应的样式；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70][]

[http_www.softwhy.com_article-9320-1.html]: http://www.softwhy.com/article-9320-1.html
[http_www.softwhy.com_article-9690-1.html]: http://www.softwhy.com/article-9690-1.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70]: /images/20220318/77e77872470342ab989305619c6a49fc.png