react函数式调用其他组件方法(二)

前言:

1. 关于借由父组件作为桥梁使用props的方法,有点繁琐,太不优雅了,而provider局限于深层子组件,context使用还要定义jsx,总之,不优雅
2. 之前使用vue3,因为取消了eventbus,有个替代方法,developit大神写的发布订阅模式的mitt,只有200b大小
3. 所以试着套用到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,相互关系解耦,无需任何绑定!