react函数式调用其他组件方法(二)
前言:
关于借由父组件作为桥梁使用props的方法,有点繁琐,太不优雅了,而provider局限于深层子组件,context使用还要定义jsx,总之,不优雅
之前使用vue3,因为取消了eventbus,有个替代方法,developit大神写的发布订阅模式的mitt,只有200b大小
所以试着套用到react,实现任意组件可以相互调用事件并传递参数
安装依赖
npm i mitt
项目总入口文件挂载到window上,方便随时调用
import mitt from 'mitt'
window.emitter = mitt()
如果typescript报错,src目录common.d.ts文件定义一下
interface Window {
[propName: string]:any
}
组件一
useEffect(() => {
// 监听打开面板,然后执行相应事件
window.emitter.on('openPanel', (e:any) => {
const { name, id } = e
setInputValue(name)
setCurIndex(id)
showModal()
})
}, [])
组件二
触发打开面板事件, 并传递参数
window.emitter.emit('openPanel', {name: '你好', id: 7})
如果不想污染window变量,以防副作用,也可以新建一个emit文件进行变量导出,在需要用到的组件引入
总结: 完全与组件标签,prop,相互关系解耦,无需任何绑定!