在React 中实现兄弟组件之间的通信,通过建立一个EventHub.js文件
如: 现有2个兄弟组件one & two
one 组件中有状态,并且有修改自身状态的方法,在组件挂在完毕时,把修改自身状态的方法绑定到eventHub中。
two 组件中引入这个EventHub.js文件,在某些业务逻辑下,通过EventHub中定义好的方法执行对应事件。
EventHub.js 👇
let callbackLists = {}
export default eventHub = {
on(eventName,callback){
if(!callbackLists[eventName]){
callbackLists[eventName] = []
}
callbackLists[eventName].push(callback)
},
trigger(eventName,data){
let callbacklist = callbackLists[eventName]
if(!callbacklist){
return
}
for(let i = 0 ; i < callbacklist.length ; i++){
callbacklist[i](data)
}
}
}