我学react之父子组件通信

发布时间:2019-06-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了我学react之父子组件通信脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

react父子组件通信

react父子间通信的几种情况

  • 父组件向子组件通信
  • 子组件向父组件通信
  • 跨级组件通信
  • 兄弟组件通信

父组件向子组件通信

由于react是单向数据流向的,父组件一般通过PRops向子组件传递相关的一些信息
来看一下下面这个例子,在这里我封装了一个modal组件,它的显示与取消的状态交由父组件来管理,它们之间的关系用一张图表示
流程图
代码如下

​ 父组件代码

我学react之父子组件通信

我学react之父子组件通信

这样子组件中的visible就被父组件接管了

子组件向父组件通信

子组件向父组件通信同样需要父组件向子组件传递props,只是父组件传递的是是作用域为自己的函数,子组件调用次函数,并将子组件想要传递的信息,作为参数,传递到父组件的作用域中

还是以上面的这个例子距离,当打开模态框的时候,通过父组件的

showModal()方法,改变visible的值,通过props传递到子组件,

关闭模态框是由内向外的。模态框在内部改变visible的值在把它传递给外部的方法

代码如下

我学react之父子组件通信

父组件

我学react之父子组件通信

跨级组件通信

通过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 (
      @H_777_123@<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的方式就可以访问到了

脚本宝典总结

以上是脚本宝典为你收集整理的我学react之父子组件通信全部内容,希望文章能够帮你解决我学react之父子组件通信所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。