React 初探（三）- 父子组件通信

概述

既然有了组件，那么组件之间如何进行通信呢？

Demo

在线运行

预览

这个 demo 主要的功能有：

• Parents 组件向 Son1 和 Son2 组件传递一个 age 属性
• Son1 和 Son2 组件都可以更改自己的名字
• Son1 和 Son2 组件都可以 call parent，并且将自己的名字传给 Parents 组件，当 Parents 组件接收到之后，将此 Son 的 age 增加1并且将谁 call 的显示在页面中
• demo 中还有一个 style 的变换
  style 变换

父子组件之间通信

其中 Parents 组件是父组件，Son1 和 Son2 组件是子组件，父组件向子组件传递参数直接在标签后添加属性即可

父组件向子组件传递参数

子组件使用 props 接收父组件传递的参数

子组件使用 props 接收参数

子组件通知父组件是通过回调形式，父组件给子组件传递一个参数( function )，子组件在适当的时候调用此参数 ( function )，并且可以传递一些必要的参数。例如： demo 中的 this.state.name

<button onClick={this.props.callParent.bind(this, this.state.name)}>call parent</button>

更深层次的通信

将上述例子复杂化，在 Son1 和 Son2 组件上增加一个 Home 组件，此时 Son1 和 Son2 组件无法直接接收到 callParent 和 age 属性。这时将 callParent 和 age 属性依次传递下去即可（在线运行）

更深层次的通信