【React】10、react父子组件传值（通信）

👏欢迎来到我的React系列文章
🍭本系列文章从React入门开始，涵盖了React的一切基础，属于是从零开始的一个系列
🍭文章会以图文结合-动图-代码实现-解释代码的形式带领大家走进React的世界
🍭持续更新中～希望大家能够喜欢，系列文章👉React–从基础到实战
🌈博客主页👉codeMak1r的博客
👉关注✨点赞👍收藏📂

1. 🔥React入门与概览（JSX语法）
2. 🔥面向组件编程——组件实例的三大核心属性state、props和refs超详解
3. 🔥受控组件与非受控组件（vue和react的双向绑定分别是怎么实现的？）
4. 🔥React函数的柯里化（什么？这玩意儿不仅能装x，还能优化代码？）
5. 🔥四行代码让我的cpu跑上90度——走进组件生命周期
6. 🔥图文详解react组件生命周期——React v16.8
7. 🔥react新生命周期图文详解——最新版
8. 🔥react-getSnapshotBeforeUpdate()生命周期函数详解
9. 🔥使用create-react-app（CRA）创建react项目
10. 🔥react父子组件传值（通信）(👈本文)

1、🍒父组件向子组件传值

在父组件中定义子组件，直接往子组件的标签中放数据，子组件可以在props中拿到。

代码实现

<script type="text/babel">// 定义父组件FatherclassFatherextendsReact.Component{
      state ={data:[{id:'001',name:'codeMak1r',handsome:true}]}render(){return(<div><div style={{color:'red',border:'1px solid skyblue',width:'120px'}}>
            我是Father组件</div>// 父组件的state中的data传给子组件<Son data={this.state.data}/></div>);}}// 定义子组件SonclassSonextendsReact.Component{render(){// 从props中拿到父组件传递来的数据const{ data }=this.props
        console.log(data)return(<div style={{color:'skyblue',border:'1px solid orange',width:'400px'}}><div>我是Son组件</div><ul>
              父组件传递给我的数据是：
              {
                data.map((data)=>{return<li key={data.id}>
                    姓名：{data.name}，ID:{data.id}，帅吗？： {data.handsome ?'当然帅！':'不帅...'}</li>})}</ul></div>);}}

    ReactDOM.render(<Father />, document.getElementById('root'))</script>

2、🍎子组件向父组件传值

在父组件中实现一个自定义方法，传递给子组件的props，用这个自定义方法监听子组件的改变

（类似Vue中的$emit语法糖）

最终拿到子组件的值。

代码实现

<script type="text/babel">// 定义父组件FatherclassFatherextendsReact.Component{// 初始化状态
      state ={Father_blog:''}// 实现自定义方法seliver()，监听子组件，接受子组件的blog属性seliver=(blog)=>{this.setState({Father_blog: blog });}render(){return(<div><div style={{color:'red',border:'1px solid skyblue',width:'400px'}}><div>我是Father组件</div>
              这是子组件传递给我的数据：{this.state.Father_blog}</div>// 向子组件传递用以监听的自定义方法<Son seliver={this.seliver}/></div>);}}classSonextendsReact.Component{// 初始化状态
      state ={blog:'codeMak1r'}handleData=()=>{const{ blog }=this.state
        // 调用父组件传递来的自定义方法seliver()，将blog属性传递给父组件this.props.seliver(blog)}render(){return(<div style={{color:'skyblue',border:'1px solid orange',width:'400px'}}><div>我是Son组件</div><button onClick={this.handleData}>点我给父组件传递数据</button></div>);}}

    ReactDOM.render(<Father />, document.getElementById('root'))</script>

3、🍇总结

🍒父传子：直接在子组件标签中传递；子组件在props中接收
🍎子传父：父组件实现一个自定义方法，监听子组件传递过来的参数；子组件在props中向这个自定义方法传递数据给父组件。

在React中父子组件的传值是必须要掌握的，react也给出了很多种组件通信的方式，比如：👬兄弟组件通信，订阅消息，redux等等…本文目前只介绍了父子组件之间的通信方式，后续会在系列专栏中更新更多的组件通信方式以及更多优质的React文章，详情请看专栏（React–从基础到实战）～😊😊

冰冻三尺非一日之寒，学习也是一个持续发力的过程💪💪，希望大家能够在自己的道路上披荆斩棘！

GO WARRIORS！！

回见～