如何在另一个React/Redux应用程序中嵌入React/Redux应用程序，而不会遇到生命周期问题？

Question

App A是一个自包含的单页React/Redux应用程序，旨在插入其他应用程序（不一定是使用React/Redux编写的应用）。我要将App A嵌入到另一个单页React/Redux应用程序B中，如下所示：

• 在应用程序B中创建一个组件ComponentA，其路由与App A使用的路由相同，其render()方法生成一个DIV标记以承载App A。

• 在ComponentA的componentWillMount()方法中，通过将相应的<script>标记附加到文档主体末尾来加载先前构建的js bundles以呈现App A。

这样似乎很好工作，但是，当我从ComponentA导航离开并返回时，我会在Chrome Dev Tools控制台中看到以下错误多次出现，每次访问ComponentA一次："Uncaught (in promise) TypeError: Cannot read property 'replaceChild' of null"。

当我检查Dev Tools的"React"选项卡时，我可以看到App A的组件层次结构多次出现，但是，只有最后一个实际附加到物理DOM上。

我的猜测是，当我使用应用程序B的链接导航到其他部分时，App A不知道路由的更改，因此它永远不会卸载，这会导致一些意外行为和后续错误。

我是这项技术的新手，并且想知道是否可以将React/Redux应用程序嵌入到另一个React/Redux应用程序中。如果可以，那么我该如何改变自己的方法才能使其正常工作？

目前我没有包含任何代码片段，因为代码是相当标准、基本的React/Redux代码，而我质疑的是方法本身。

- pikkabird

---

谢谢您的解释，但如果能提供一些代码来查看实现并寻找问题会更好。只是出于好奇，为什么要将两个应用程序合并成一个单一的redux应用程序？您可以获取一个应用程序的JSON或状态，并将其放在另一个应用程序中，这样您就会拥有单一的真相来源，减少复杂性和问题。 - Jan Cássio

@Jan Cássio：感谢您的回复。我决定进行更多的研究，最终成功解决了问题（请参见下面的我的答案）。至于您的问题，假设我理解正确，托管应用程序（B）是一个现有的应用程序，因此我无法控制其代码，而应用程序A旨在成为一个自包含的单页应用程序，以便更轻松地与其他应用程序集成。 - pikkabird

Answer 1

我通过修改应用程序A的入口点中的代码并更改应用程序的构建方式来解决了问题。

修复前：

• App A被构建为自包含、自渲染的应用程序。
• App B的ComponentA在其componentWillMount()方法中添加了App A的捆绑脚本标签。
• App A的入口JSX立即执行ReactDOM.render()，并且没有办法从App B内部卸载它。

修复后：

• App A被构建为库（在Webpack配置中指定）。
• App A的入口JSX定义了库接口，公开自定义的new()、render()和unmount()方法。
• App A的捆绑脚本标签在App B的index.html中硬编码。
• App B的ComponentA：
  • 在componentWillMount()中：实例化App A。
  • 在componentDidMount()中：调用App A的render()。
  • 在componentWillUnmount()中：调用App A的unmount()，这将调用ReactDOM.unmountComponentAtNode()。

现在，“React”选项卡中只看到一个App A组件层次结构的实例，并且控制台中不再出现错误。

对于有兴趣的人，这个修复受到了我最终遇到的以下文章的启发：https://codeburst.io/building-react-widget-libraries-using-webpack-e0a140c16ce4

- pikkabird