如何在第三方React组件渲染后插入自定义React元素？

你遇到的场景是：第三方组件SomeComponent内部渲染了tools列表，但未提供扩展API，希望通过DOM操作直接追加自定义React元素到其渲染的DOM中。这个需求是可以实现的，但不能直接将React虚拟DOM元素传给原生DOM的appendChild方法，需要通过React的API将虚拟DOM转换为真实DOM后再插入。

核心解决方案：用React Portal实现跨DOM树渲染 #

React Portal是官方推荐的方案，它允许将组件渲染到DOM树中任意位置，同时保留React的状态管理、事件绑定和上下文（比如Redux、Context），比纯原生DOM操作更符合React的设计模式。

修改后的App.tsx代码

import * as React from 'react';
import { createPortal } from 'react-dom';
import { SomeComponent } from './third-party';

export default function App() {
  // 修复原代码key重复问题，给每个自定义工具项唯一标识
  const customTools = [
    { value: 100, action: () => console.log('hello'), id: 'custom-tool-1' },
    { value: 200, action: () => console.log('world'), id: 'custom-tool-2' },
  ];
  
  const [toolsWrapper, setToolsWrapper] = React.useState<HTMLUListElement | null>(null);
  // 存承载Portal内容的容器，避免重复创建
  const portalContainerRef = React.useRef<HTMLDivElement | null>(null);

  // 初始化获取第三方组件的DOM容器并创建Portal载体
  React.useEffect(() => {
    const wrapper = document.querySelector('.tools-wrapper');
    if (wrapper) {
      setToolsWrapper(wrapper);
      const container = document.createElement('div');
      portalContainerRef.current = container;
      wrapper.appendChild(container);
    }

    // 组件卸载时清理载体，防止内存泄漏
    return () => {
      portalContainerRef.current?.remove();
    };
  }, []);

  // 监听第三方组件重渲染：避免自定义元素被清空
  React.useEffect(() => {
    if (!toolsWrapper || !portalContainerRef.current) return;

    const observer = new MutationObserver((mutations) => {
      const hasContainer = Array.from(toolsWrapper.children).includes(portalContainerRef.current!);
      // 若第三方重渲染移除了我们的容器，重新插入
      if (!hasContainer) {
        toolsWrapper.appendChild(portalContainerRef.current!);
      }
    });

    observer.observe(toolsWrapper, { childList: true });
    return () => observer.disconnect();
  }, [toolsWrapper]);

  return (
    <div>
      <SomeComponent />
      {/* 通过Portal将自定义工具项渲染到第三方组件的DOM容器中 */}
      {toolsWrapper && portalContainerRef.current && createPortal(
        <>
          {customTools.map((tool) => (
            <li key={tool.id} onClick={tool.action}>
              {tool.value}
            </li>
          ))}
        </>,
        portalContainerRef.current
      )}
    </div>
  );
}

关键细节说明 #

1. 虚拟DOM转真实DOM：React元素是虚拟DOM节点，无法直接用原生DOM方法操作，Portal会帮我们完成虚拟DOM到真实DOM的渲染，并挂载到指定的第三方DOM容器中。
2. 防重渲染丢失：第三方组件如果因内部状态变化重新渲染，可能会清空tools-wrapper的子元素，用MutationObserver监听容器的子元素变化，一旦发现自定义载体被移除就重新插入。
3. 内存泄漏防护：组件卸载时手动移除创建的DOM载体，避免残留无用节点。
4. 唯一key：必须给列表项设置唯一key，否则React会无法正确识别列表项，引发渲染异常。

替代方案：直接用createRoot渲染（React 18+） #

如果不需要保留React上下文，也可以用createRoot直接将自定义元素渲染到目标容器：

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { SomeComponent } from './third-party';

export default function App() {
  const customTools = [
    { value: 100, action: () => console.log('hello'), id: 'custom-tool-1' },
    { value: 200, action: () => console.log('world'), id: 'custom-tool-2' },
  ];

  React.useEffect(() => {
    const toolsWrapper = document.querySelector('.tools-wrapper');
    if (!toolsWrapper) return;

    const container = document.createElement('div');
    toolsWrapper.appendChild(container);
    const root = ReactDOM.createRoot(container);
    
    root.render(
      <>
        {customTools.map((tool) => (
          <li key={tool.id} onClick={tool.action}>
            {tool.value}
          </li>
        ))}
      </>
    );

    // 卸载时清理
    return () => {
      root.unmount();
      container.remove();
    };
  }, []);

  return (
    <div>
      <SomeComponent />
    </div>
  );
}

这种方式更接近原生DOM操作，但Portal方案更适合需要保留React上下文的场景。

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