在外部网页集成两个React应用时第二个无法正常渲染的问题求助

核心问题是两个React应用共享全局React/ReactDOM环境时，后加载的应用无法正确完成React初始化，导致仅渲染静态内容，无法触发组件生命周期、事件绑定等React特性。

常见诱因包括：

• 子应用输出的HTML包含重复的react/react-dom引入，污染全局环境
• 动态插入的JSX脚本未被babel-standalone编译（仅初始页面脚本会被自动处理）
• 脚本执行逻辑干扰了全局React实例的状态

1. 推荐：将子应用打包为UMD组件库 #

把header和footer应用打包成独立的UMD模块，由主页面统一控制React实例和渲染流程，彻底避免全局冲突：

• 子应用打包时配置output.libraryTarget: 'umd'，暴露组件入口
• 主页面通过动态导入加载并渲染组件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
  <div id="header-container"></div>
  <div id="outer_div">outer content</div>
  <div id="footer-container"></div>

  <script>
    // 加载并渲染Header
    const loadHeader = async () => {
      const { default: Header } = await import('http://url/header-umd.js');
      const root = ReactDOM.createRoot(document.getElementById('header-container'));
      root.render(React.createElement(Header));
    };

    // 加载并渲染Footer
    const loadFooter = async () => {
      const { default: Footer } = await import('http://url/footer-umd.js');
      const root = ReactDOM.createRoot(document.getElementById('footer-container'));
      root.render(React.createElement(Footer));
    };

    // 并行加载两个应用
    Promise.all([loadHeader(), loadFooter()]);
  </script>
</body>
</html>

2. 修复现有HTML嵌入方式 #

如果无法修改子应用打包逻辑，可通过以下步骤解决冲突：

2.1 移除子应用中的重复依赖 #

检查子应用返回的HTML，删除其中的react/react-dom/babel引入，统一使用主页面的全局实例。

2.2 手动编译动态插入的JSX脚本 #

babel-standalone仅处理页面初始加载时的脚本，动态插入的JSX代码需手动编译：

fetch('http://url/footer')
  .then(response => response.text())
  .then(data => {
    const fragment = document.createRange().createContextualFragment(data);
    // 遍历片段中的脚本，编译JSX
    Array.from(fragment.querySelectorAll('script')).forEach(script => {
      if (script.textContent.includes('React.createElement') || script.type === 'text/babel') {
        const compiledCode = Babel.transform(script.textContent, { presets: ['react'] }).code;
        const newScript = document.createElement('script');
        newScript.textContent = compiledCode;
        script.replaceWith(newScript);
      }
    });
    document.getElementById("footer-container").appendChild(fragment);
  });

2.3 确保容器元素提前存在 #

调整页面结构，让容器元素位于脚本之前，避免fetch回调执行时无法找到DOM节点：

<!-- 先定义容器 -->
<div id="header-container"></div>
<div id="outer_div">outer content</div>
<div id="footer-container"></div>

<!-- 再加载脚本 -->
<script>
  fetch('http://url/header')
    .then(response => response.text())
    .then(data => {
      const node = document.createRange().createContextualFragment(data);
      document.getElementById("header-container").appendChild(node);
    });
</script>
<script>
  fetch('http://url/footer')
    .then(response => response.text())
    .then(data => {
      const node = document.createRange().createContextualFragment(data);
      document.getElementById("footer-container").appendChild(node);
    });
</script>

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