react框架 新建组件以及父子组件通信

新建一个ComentList.js 文件

定义一个新的组件.png

代码语言：javascript复制

import React from "react"
//   创建组件
class ComentList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // 在这里定义变量
            visible: true, 
            //  那么如何改变变量  ？  下面示例
            // this.setState({
            //     visible: true,
            // });
        }
 
    }
    render() {
        return (
            //  这里写页面结构 
            <div className="list">
                {/*   通过props 的形式来接收父组件的传值 */}
                    <h3> { this.props.news } </h3>
                <ul>
                    {
                        this.props.arr.map(( item,index )=> { //这个地方通过this.props.arr接收到父组件传过来的arr，然后在{}里面进行js的循环
                            return (
                                <li key={index}>
                                   评论是:{item.name}
                                </li>
                            )
                        })
                    }
                </ul>
             
            </div>
        )
    }
}
//  暴露组件
export default ComentList;

父组件中使用子组件

代码语言：javascript复制

import ComentList from './ComentList'


在父组件的render 函数中使用    (代码只贴出了部分 )
   render() {
        return (
            //  这里的arr news  用于传递给子组件  
        <div>
           <ComentList arr={this.state.arr} news=" 数据数据 ">
        </div>
        )
    }

---

注意事项

代码语言：javascript复制

this.props.news    /// 用于接收父组件的值
import 引入  必须要在const  let  之前

注意.png

继续 子组件==》父组件 也是通过props

子组件传值给父组件.png

父组件接收子组件传递的数据.png

结束了：通过props来进行父子传值。

png 数据

0 人点赞