如何通过手动触发事件实现两个独立函数组件间的通信通知

两个独立函数组件没有直接父子/层级传参关系时，用浏览器原生CustomEvent即可实现需求，零额外依赖，具体修改如下：

组件A（事件触发端）代码 #

在specialFunction中创建自定义事件，将需要传递的数据挂载到detail属性后全局派发即可：

import React from 'react';

export default function ComponentA() {
  const specialFunction = () => {
    // 替换成你实际需要传递的业务数据
    const transferData = {
      content: '组件A触发的事件数据',
      triggerTime: Date.now()
    };
    // 自定义事件名可以自行定义，两边保持一致即可
    const triggerEvent = new CustomEvent('specialEventName', {
      detail: transferData
    });
    window.dispatchEvent(triggerEvent);
  };

  return <button onClick={specialFunction}>点击触发事件</button>;
}

组件B（事件监听端）代码 #

在函数组件的useEffect钩子中注册事件监听器，组件卸载时必须移除监听器避免内存泄漏：

import React, { useEffect } from 'react';

export default function ComponentB() {
  useEffect(() => {
    // 事件触发后的处理逻辑
    const eventHandler = (event) => {
      // 从event.detail中拿到组件A传递的数据
      const data = event.detail;
      console.log("am called:",data);
      // 后续自定义业务逻辑写在这里
    };
    // 绑定监听器，事件名和A端派发的保持一致
    window.addEventListener('specialEventName', eventHandler);

    // 组件卸载时清理监听器
    return () => {
      window.removeEventListener('specialEventName', eventHandler);
    };
  }, []);

  return <div>组件B已挂载，正在监听事件</div>;
}

注意事项 #

• 自定义事件名可按需修改，只要触发端和监听端的事件名完全一致即可
• 跨组件传递的数据必须放在CustomEvent配置项的detail字段中，其他字段无法被监听端正确读取
• 不要忘记在useEffect的返回回调中移除事件监听器，否则会出现内存泄漏、逻辑重复触发的问题

内容的提问来源于stack exchange，提问作者Marwane