如何从React子组件获取根DOM元素并触发自定义事件？

首先明确：React没有提供直接让组件树深处的子组件获取对应渲染根元素的内置API，因为React的设计理念是让组件尽量与外部DOM解耦，依赖明确的props或上下文传递数据。

以下是几种可行的实现方案：

方案1：使用Context传递根元素 #

这是React官方推荐的跨组件传递数据的方式，适配多根渲染场景，每个根的Context独立，子组件能精准拿到对应根元素。

实现步骤： #

1. 创建Context

const RootElementContext = React.createContext(null);

2. 根渲染时注入Context

// 假设你从文档中获取的根元素列表
const rootElements = document.querySelectorAll('.react-root-container');

rootElements.forEach(rootEl => {
  ReactDOM.render(
    <RootElementContext.Provider value={rootEl}>
      <App />
    </RootElementContext.Provider>,
    rootEl
  );
});

3. 深层子组件中使用Context

import { useContext } from 'react';

function DeepNestedChild() {
  const rootElement = useContext(RootElementContext);

  const triggerCustomEvent = () => {
    const myCustomEvent = new CustomEvent('custom-event-name', {
      detail: { payload: 'some data' },
      bubbles: false
    });
    rootElement.dispatchEvent(myCustomEvent);
  };

  return <button onClick={triggerCustomEvent}>触发自定义事件</button>;
}

方案2：利用DOM事件冒泡特性 #

如果不需要直接获取根元素引用，仅需让根元素监听到子组件的事件，可以利用事件冒泡机制，无需传递根元素。

实现步骤： #

1. 子组件中触发可冒泡的自定义事件

function DeepNestedChild() {
  const triggerCustomEvent = (event) => {
    const myCustomEvent = new CustomEvent('custom-event-name', {
      detail: { payload: 'some data' },
      bubbles: true,
      cancelable: true
    });
    // 用当前组件的DOM节点触发事件，会向上冒泡到根元素
    event.currentTarget.dispatchEvent(myCustomEvent);
  };

  return <button onClick={triggerCustomEvent}>触发自定义事件</button>;
}

2. 根元素绑定事件监听

const rootElements = document.querySelectorAll('.react-root-container');

rootElements.forEach(rootEl => {
  ReactDOM.render(<App />, rootEl);
  // 给根元素绑定监听
  rootEl.addEventListener('custom-event-name', (e) => {
    console.log('根元素收到事件:', e.detail);
  });
});

注意：如果页面存在多个根元素，可以在事件detail中添加唯一标识（比如根元素的ID），在监听时判断是否为当前根的事件。

方案3：全局映射存储根元素 #

通过全局Map存储根元素与唯一标识的对应关系，子组件通过标识获取对应根元素。

实现步骤： #

1. 初始化全局存储

// 建议放在单独模块中，避免污染全局作用域
const rootElementMap = new Map();

2. 根渲染时存入Map

const rootElements = document.querySelectorAll('.react-root-container');

rootElements.forEach((rootEl, index) => {
  const rootId = `react-root-${index}`;
  rootElementMap.set(rootId, rootEl);
  
  ReactDOM.render(
    <App rootId={rootId} />,
    rootEl
  );
});

3. 子组件中获取根元素

// 封装成自定义Hook复用
function useRootElement(rootId) {
  return rootElementMap.get(rootId);
}

function DeepNestedChild({ rootId }) {
  const rootElement = useRootElement(rootId);

  const triggerCustomEvent = () => {
    const myCustomEvent = new CustomEvent('custom-event-name', {
      detail: { payload: 'some data' }
    });
    rootElement.dispatchEvent(myCustomEvent);
  };

  return <button onClick={triggerCustomEvent}>触发自定义事件</button>;
}

注意：当根元素被卸载时，记得从Map中删除对应条目，避免内存泄漏。

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