能否将React生成的静态应用嵌入AngularJS 1.x视图？

因为你不需要AngularJS和React之间共享状态或组件，下面是几个简单直接的实现方案：

方案1：使用iframe嵌入（最省心） #

这是最简单的方式，完全隔离两个应用，不需要任何代码修改：

1. 将React项目执行npm run build生成的build文件夹，复制到AngularJS项目的静态资源目录下（比如/static/react-app/）
2. 在你需要展示React应用的AngularJS模板中，添加iframe标签：

<iframe 
  src="/static/react-app/index.html" 
  frameborder="0" 
  style="width: 100%; height: 100vh; border: none; display: block;"
></iframe>

优点：零配置成本，两个应用完全独立，不会产生任何全局变量或样式冲突。

方案2：直接整合React静态资源到Angular模板 #

如果不想用iframe，可以把React的静态资源直接嵌入到Angular视图中：

1. 先修改React项目的package.json，添加"homepage": "./"，确保build生成的资源路径是相对路径，然后重新执行npm run build
2. 将React的build文件夹所有内容复制到AngularJS项目的静态目录（比如/assets/react-build/）
3. 在目标AngularJS模板中，引入React的CSS和JS文件，并添加React根节点：

<!-- 引入React的样式文件 -->
<link rel="stylesheet" href="/assets/react-build/static/css/main.[hash].css">
<!-- 引入React的脚本文件 -->
<script src="/assets/react-build/static/js/main.[hash].js"></script>
<!-- React应用的挂载节点，要和React项目中src/index.js里的挂载目标一致（默认是root） -->
<div id="root"></div>

注意：替换[hash]为你实际build生成的文件哈希值，或者在构建脚本中自动替换路径（比如用gulp/webpack的插件）。

方案3：封装为AngularJS指令（更灵活） #

如果需要在多个地方复用，可以写一个简单的AngularJS指令来加载React应用：

angular.module('yourAngularApp').directive('embeddedReactApp', function() {
  return {
    restrict: 'E',
    template: '<div id="react-app-root"></div>',
    link: function(scope, element) {
      // 动态加载React样式
      const cssLink = document.createElement('link');
      cssLink.rel = 'stylesheet';
      cssLink.href = '/assets/react-build/static/css/main.[hash].css';
      document.head.appendChild(cssLink);

      // 动态加载React脚本
      const jsScript = document.createElement('script');
      jsScript.src = '/assets/react-build/static/js/main.[hash].js';
      jsScript.onload = function() {
        // React会自动挂载到#react-app-root，确保React项目中挂载目标是这个ID
      };
      document.body.appendChild(jsScript);
    }
  };
});

然后在模板中直接使用指令：

<embedded-react-app></embedded-react-app>

注意事项 #

• 确保AngularJS项目的静态资源服务器能正确访问到React的build文件
• 如果担心缓存问题，保留React build文件的哈希命名是最佳实践，只是需要注意路径匹配
• 三种方案中，iframe是最适合无交互需求的场景，完全避免了两个框架的潜在冲突

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