共计 1078 个字符，预计需要花费 3 分钟才能阅读完成。
react 父子组件通信
react 父子间通信的几种情况
父组件向子组件通信
子组件向父组件通信
跨级组件通信
兄弟组件通信
父组件向子组件通信
由于 react 是单向数据流向的，父组件一般通过 props 向子组件传递相关的一些信息 来看一下下面这个例子，在这里我封装了一个 modal 组件，它的显示与取消的状态交由父组件来管理，它们之间的关系用一张图表示流程图 代码如下
父组件代码
这样子组件中的 visible 就被父组件接管了
子组件向父组件通信
子组件向父组件通信同样需要父组件向子组件传递 props，只是父组件传递的是是作用域为自己的函数，子组件调用次函数，并将子组件想要传递的信息，作为参数，传递到父组件的作用域中
还是以上面的这个例子距离，当打开模态框的时候，通过父组件的
showModal() 方法，改变 visible 的值，通过 props 传递到子组件，
关闭模态框是由内向外的。模态框在内部改变 visible 的值在把它传递给外部的方法
代码如下
父组件
跨级组件通信
通过 context 进行通信，我们可以把组件之间的关系想象成一个组件树，原始的方法就是通过 props 一级一级的把状态往下传，在通过调用方法一级一级传回去，另一种方法就是在他们之间设置一个区域，每个组件都可以访问到，相当于父组件下的一个全局变量
代码
最头部的父组件
class Index extends Component {
static childContextTypes = {
themeColor: PropTypes.string
}
constructor () {
super()
this.state = {themeColor: ‘red’}
}
getChildContext () {
return {themeColor: this.state.themeColor}
}
render () {
return (
<div>
<Header />
<Main />
</div>
)
}
}
要在父组件设置这个 context 区域，在 childContextTypes 中设置允许子组件们访问的变量的名称，getChildContext（）会设置这个区域，这样所有的子组件都可以访问到 themeColor 这个参数了
子组件如何访问
class Title extends Component {
static contextTypes = {
themeColor: PropTypes.string
}
render () {
return (
<h1 style={{color: this.context.themeColor}}>React.js 小书标题 </h1>
)
}
}
通过在 this.context 的方式就可以访问到了
