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