React 组件间通信主要分为以下四种情况：
下面对这四种情况分别进行介绍：
父组件通过 props 和子组件进行通信，子组件得到 props 后进行相应的操作
父组件 App.js:
import React, { Component } from ‘react‘;import ‘./App.css‘;import Child1 from ‘./Child1‘;class App extends Component { render() { return ( <div className="App"> <Child1 content="父组件传递的内容" /> </div> ); }}export default App;子组件 Child1.jsx
import React, { Component } from ‘react‘;class Child1 extends Component { render () { return ( <div> 子组件一：{ this.props.content } </div> ) }}export default Child1;和父组件向子组件通信类似，父组件通过传递 props 给子组件，只不过 props 的内容是一个函数，子组件通过调用父组件传递过来的回调函数，将子组件内容传递给父组件。
父组件 App.js
import React, { Component } from ‘react‘;import logo from ‘./logo.svg‘;import ‘./App.css‘;import Child1 from ‘./Child1‘;import Child2 from ‘./Child2‘;class App extends Component { constructor(){ super(); this.state = { msg:‘‘, } } childMsg(msg){ this.setState({ msg: msg, }) } render() { return ( <div className="App"> 子组件二传过来的内容：{this.state.msg} <Child2 childMsg={this.childMsg.bind(this)}/> </div> ); }}export default App;子组件 Child2.jsx:
import React, { Component } from ‘react‘;class Child2 extends Component { msgHandle(){ this.props.childMsg(this.refs.input.value); } render () { return ( <div> 子组件二： <input type="text" placeholder=‘请输入内容‘ ref=‘input‘ /> <button onClick={this.msgHandle.bind(this)}>点击向父组件传参</button> </div> ) }}export default Child2;跨级组件是指父组件向子组件的子组件进行通信，或者向更深层次的子组件通信，主要有两种方式：
对于层级不深的组件（三层以内），可以使用 props 进行层层传递，如果说层级更深的话，
每一层组件都要去传递 props，并且这些 props 可能不是自身需要的，这就增加了复杂度，这种场景就可以使用 context 进行通信。context 是一个全局变量，相当于一个大容器，我们把要传递的信息放到这个容器里面，不管嵌套层级多深，子组件都可以获取到信息。使用 context 需要满足以下三个条件：
1、父组件需要声明自己支持 context，并提供 context 对象中属性的 PropTypes
2、子组件需要声明自己需要使用 context，并提供其需要使用的 context 属性的 PropTypes。
3、父组件需要提供一个 getChildContext 函数，用来返回一个初始的 context 对象
props 层层传递：
父组件App.js:
import React, { Component } from ‘react‘;import logo from ‘./logo.svg‘;import ‘./App.css‘;import Child1 from ‘./Child1‘;class App extends Component { constructor(){ super(); } render() { return ( <div className="App"> <Child1 content="父组件传递给孙子组件的内容" /> </div> ); }}export default App;Child1.jsx:
import React, { Component } from ‘react‘;import Child1_1 from ‘./Child1_1‘;class Child1 extends Component { render () { return ( <div> <Child1_1 content={this.props.content}/> </div> ) }}export default Child1;Child1_1.jsx:
import React, { Component } from ‘react‘;class Child1_1 extends Component { render () { return ( <div> 子组件一的子组件：{ this.props.content } </div> ) }}export default Child1_1;context 对象传递
父组件App.js:
import React, { Component } from ‘react‘;import logo from ‘./logo.svg‘;import ‘./App.css‘;import PropTypes from "prop-types";import Child1 from ‘./Child1‘;class App extends Component { // 声明支持 context static childContextTypes = { msgs: PropTypes.string, callBack: PropTypes.func, } // 父组件提供一个函数，返回初始的 context 对象 getChildContext(){ return { msgs:‘父组件传递的初始内容‘, callBack:this.callBack } } callBack(msgs){ console.log(msgs); } render() { return ( <div className="App"> <Child1 /> </div> ); }}export default App;子组件 Child1.jsx:
import React, { Component } from ‘react‘;import Child12 from ‘./Child1_2‘;class Child1 extends Component { render () { return ( <div> <Child12 /> </div> ) }}export default Child1;子组件的子组件 Child1_2:
import React, { Component } from ‘react‘;import PropTypes from ‘prop-types‘;class Child1_2 extends Component { // 子组件声明需要调动 context static contextTypes = { msgs:PropTypes.string, callBack:PropTypes.func } callBack(){ this.context.callBack(‘孙子组件的信息‘); } render () { return ( <div> 子组件一的子组件：{ this.context.msgs } <button onClick={this.callBack.bind(this)}>点击给爷爷组件传递信息</button> </div> ) }}export default Child1_2;表示没有任何包含关系的组件，主要包括兄弟组件和不在同一个父级中的非兄弟组件。
对于使用共同父组件 context 的方式会增加子组件和父组件之间的耦合度，对于层级较深的组件找到共同父组件也比较麻烦，但是这种方式可实施。
为了避免父子组件之间的耦合度，我们采用自定义事件的方式：
需要安装 events 包，使用该模块的自定义事件机制npm i events --save
在根目录下新建 events.js 文件：
import { EventEmitter } from ‘events‘;export default new EventEmitter();父组件 App.js:
import React, { Component } from ‘react‘;import logo from ‘./logo.svg‘;import ‘./App.css‘;import Child1 from ‘./Child1‘;import Child2 from ‘./Child2‘;class App extends Component { render() { return ( <div className="App"> <Child1 /> <Child2 /> </div> ); }}export default App;子组件 Child1.jsx:
import React, { Component } from ‘react‘;import emitter from ‘./events‘;class Child1 extends Component { constructor(props){ super(props); this.state = { msg:‘‘ } } // 组件挂载完后，声明一个自定义事件 componentDidMount(){ this.eventEmitter = emitter.addListener(‘selfEventName‘,msg => { this.setState({ msg: msg }) }) } // 组件销毁前清除事件监听 componentWillUnmount(){ emitter.removeListener(this.eventEmitter) } render () { return ( <div> 子组件二传递过来的内容：{ this.state.msg } </div> ) }}export default Child1;子组件 Child2.jsx:
import React, { Component } from ‘react‘;import emitter from ‘./events‘;class Child2 extends Component { msgHandle(){ emitter.emit(‘selfEventName‘,‘自定义事件传参‘); } render () { return ( <div> 子组件二： <button onClick={this.msgHandle.bind(this)}>点击向父组件传参</button> </div> ) }}export default Child2;原文：https://www.cnblogs.com/web-panpan/p/10486395.html