子组件传值给父组件_React四种组件通信详解

组件间通信常见的几种情况
一、父组件到子组件
二、子组件到父组件
三、跨级组件
四、非嵌套组件

1）父组件到子组件：通常父组件使用props向子组件传递，然后子组件处理
父组件Parent.js

子组件Child.js

在上面的例子中，父组件Parent通过title属性向子组件Child传递值，子组件Child通过this.prop.title就可以获取到父组件Parent的传递的值 2）子组件到父组件：利用回调函数
父组件Parent.js

子组件Child.js

上面例子中，在子组件Child中绑定了onClick事件。调用成本cb()方法。在cb()方法中，通过props发送出去一个方法，父组件中去接收这个方法，callback={this.callback}，然后在自身的callback函数中进行一些列操作。
3）跨级组件：即父组件向子组件的子组件通信，向更深层子组件通信①中间组件层层传递props②使用context对象
对于第一种方式，如果父组件结构较深，那么中间每一层组件都要去传递props，增加了复杂度，并且这些props并不是中间组件自己需要的。
使用context方式中context相当于一个全局变量，是一个大容器，我们可以把要通信的内容放在这个容器中，这样不管嵌套多深。都可以随意取用。使用context要满足两个条件：上级组件要声明自己支持context，并提供一个函数来返回相应的context对象、子组件要声明自己需要使用context
父组件Parent.js

子组件Child.js

子组件的子组件GrandChild.js

4）非嵌套组件：即没有任何包含关系的组件，包括兄弟组件以及不在同一个父级中的非兄弟组件。①利用二者共同父组件的context对象通信②使用自定义事件
使用二者共同父级进行中转会增加子组件和父组件间的耦合度，如果组件层次比较深，找到二者共同父组件会相对麻烦。
使用自定义事件方式需要使用events包：npm install -S events创建event.js文件，向外提供一个事件

父组件Parent.js

组件Aoo.js

组件Boo.js

实际应用中，在组件间进行通信时，这些通信方式都可以使用，区别只在于使用相应的通信方式的复杂程度和个人喜好，选择最合适的那一个。比如，通过事件订阅模式通信不止可以应用在非嵌套组件间，还可以用于跨级组件间，非嵌套组件间通信也可以使用context。