React页面加载完成后如何在指定位置插入自定义组件

该需求完全可以实现，核心是用React提供的手动渲染API，在不修改原有页面渲染逻辑的前提下，把自定义组件挂载到指定DOM节点。

操作步骤 #

• 第一步：编写注入逻辑组件，监听DOM渲染完成状态
  由于页面内容是后端返回的动态内容，需要用MutationObserver监听DOM变化，确认至少2个段落已经渲染到页面后，再执行你的校验逻辑，避免内容还没加载就执行判断。
  示例代码如下：

  import { useEffect } from 'react';
  import { createRoot } from 'react-dom/client';
  // 引入你自己的广告组件
  import YourAdComponent from './YourAdComponent';
  
  // 这个组件不需要渲染任何可见内容，只负责执行注入逻辑
  const AdInjector = () => {
    useEffect(() => {
      // 监听DOM变化，判断后端返回的内容是否渲染完成
      const observer = new MutationObserver(() => {
        const allParagraphs = document.querySelectorAll('p');
        // 至少存在2个段落才继续执行
        if (allParagraphs.length >= 2) {
          observer.disconnect();
          // 执行你自定义的所有校验逻辑，返回布尔值
          const isValidatePass = runYourValidations();
          if (isValidatePass) {
            // 拿到第二个段落（下标从0开始，所以第二个是1）
            const secondParagraph = allParagraphs[1];
            insertAdAfterNode(secondParagraph);
          }
        }
      });
  
      observer.observe(document.body, {
        childList: true,
        subtree: true
      });
  
      // 组件卸载时清理监听器
      return () => observer.disconnect();
    }, []);
  
    return null;
  };
  

• 第二步：实现组件插入逻辑
  手动创建DOM容器，插入到第二个段落之后，再用React的手动渲染API把广告组件挂载到这个容器上：

  const insertAdAfterNode = (targetNode) => {
    // 创建广告组件的挂载容器
    const adContainer = document.createElement('div');
    // 插入到目标节点的后面
    targetNode.after(adContainer);
  
    // React 18+ 写法
    const root = createRoot(adContainer);
    root.render(<YourAdComponent />);
  
    // React 17及更早版本写法，替换上面两行即可
    // import ReactDOM from 'react-dom';
    // ReactDOM.render(<YourAdComponent />, adContainer);
  };
  

• 第三步：引入注入组件到项目
  不需要修改原有页面的任何代码，只需要把AdInjector组件放到你项目的根组件（比如App.jsx）里即可，它会自动执行监听、校验、注入逻辑，不会影响原有React树的运行。

注意事项 #

• 如果页面存在路由切换或者内容动态更新的场景，可以在对应更新时机重新执行监听逻辑，保证广告能正确插入
• 不需要展示广告或者页面卸载时，可以调用root.unmount()（React18）或者ReactDOM.unmountComponentAtNode(adContainer)（React17及更早）手动清理组件，避免内存泄漏

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