React - 兄弟组件通信

[jtwang7]

React - 兄弟组件通信

使用 events 包实现 React 兄弟组件间的简单通信：

npm install events --save

npm 包地址：events(npm)
使用文档：nodejs-events

Step 1

新建一个 js 文件作为 EventBus。在该文件中，引入 events 包，并实例化一个事件对象并向外暴露接口，供通信时使用。

// eventBus.js
import { EventEmitter } from 'events';
export default new EventEmitter();

Step 2

注册监听事件：

// 兄弟组件1
import Bus from './eventBus';

Bus.on('xxx', (payload) => {console.log(payload)});

Step 3

触发事件监听 (事件发送)：

// 兄弟组件2
import Bus from './eventBus';

Bus.emit('xxx', payload)