jtwang7 / React-Note

React 学习笔记
8 stars 2 forks source link

React - 兄弟组件通信 #38

Open jtwang7 opened 2 years ago

jtwang7 commented 2 years ago

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)