我学react之父子组件通信

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的方式就可以访问到了