Hello! 欢迎来到小浪资源网!

React应用中,如何使用事件监听库实现组件间通信?


React应用中,如何使用事件监听库实现组件间通信?

通过事件监听库实现组件间的通信,有哪些推荐?

在react应用中,您希望通过事件监听库实现组件间通信,但又不想使用组件间通信或状态管理库。以下是推荐的事件监听库:

customevent

customevent是浏览器原生支持的事件类型,允许您创建并分发自定义事件。它可以跨组件、甚至跨窗口进行事件通信。

使用示例:

  • 在父组件中:
const eventname = `event-${math.random()}`  return (     <div>         <compa eventname={eventname} />         <compb eventname={eventname} />     </div> )
  • 在组件 a 中:
dispatchevent(new customevent(eventname))
  • 在组件 b 中:
addEventListener(eventName, (e) => console.log(e))

相关阅读