react兄弟组件传值

Posted 2020-12-19 wywd

react中实现数据的共享可以通过react提供的Context组件，但是开发中经常有跨组件之间的事件传递。在vue中可以通过事件总线的方式（在Vue的原型链上挂载一个Vue的实例）。

在react中可以借助第三方库来完成。这里推荐两个使用较多的库 pubsub-js 和 events 来完成对应的操作。

可以通过npm 或者 yarn 来安装events

  npm install events  /  yarn add events

  events的常用API

•      创建EventEmitter对象 : const eventBus = new EventEmitter()
  
•      发出事件：eventBus.emit(‘事件名称‘,‘参数列表‘)
•      监听事件：eventBus.addListener(‘事件名称‘,‘监听函数‘)
  
•      移出事件：eventBus.removeListener(‘事件名称‘,‘监听函数‘)

 

   通过npm 或者 yarn 来安装events

• npm install pubsub-js
• 引入这个依赖  import PubSub from ‘pubsub-js‘
• 发布消息：PubSub .publish("发布的消息名","提供给订阅者的参数")
• 订阅消息：PubSub.subcribe("发布的消息名","事件的监听函数")