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

Question

App A是一个独立的单页React / Redux应用程序，可以插入其他应用程序（不一定用React / Redux编写）。我正在尝试将app A嵌入到另一个单页的React / Redux应用程序B中，如下所示：

• 在应用B中，创建一个组件ComponentA，其路由与应用A使用的相同，其render()方法为主机应用A生成DIV标记。 / p>

• 在ComponentA的componentWillMount()方法中，通过在文档正文的末尾附加相应的<script>标记来加载以前构建的应用A的js包，这会导致应用A呈现为页面。

此似乎可以正常工作，但是，当我离开ComponentA并返回时，我发现Chrome Dev Tools控制台中出现以下错误的次数与访问ComponentA的次数相同：< em>“Uncaught（in promise）TypeError：无法读取属性'replaceChild'的null”。

当我检查开发工具的“反应”选项卡时，我可以看到应用A的组件层次结构多次出现，但是，只有最后一个实际连接到物理DOM。

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

我是该技术的新手，我想知道是否有可能在另一个React / Redux应用程序中嵌入React / Redux应用程序。如果是，那么我怎样才能改变我的方法以使其正常工作？

我暂时还没有包含任何代码片段，因为代码是非常标准的，基本的React / Redux代码，而且这是我自己质疑的方法。

Answer 1

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

在修复之前：

• App A是作为一个独立的自渲染应用程序构建的。
• App B的ComponentA正在其componentWillMount()方法中添加应用A的捆绑脚本标记。
• App A的条目JSX立即执行ReactDOM.render()，并且无法从应用B中卸载它。

修复后：

• App A构建为库（在Webpack配置中指定）。
• App A的条目JSX定义了库接口，公开了自定义new()，render()和unmount()方法。
• App A的捆绑脚本标签在app B的index.html中进行了硬编码。
• App B＆＃39的ComponentA：
  • in componentWillMount()：实例化应用A。
  • 在componentDidMount()中：调用app A＆＃39;渲染（）。
  {li} in componentWillUnmount()：致电应用A unmount()，呼叫ReactDOM.unmountComponentAtNode()。

我现在只看到了应用A＆＃34; React＆＃34;中的一个应用A组件层次结构的实例。选项卡，控制台中不再显示错误。

对于任何有兴趣的人来说，修复程序的灵感来自我最终遇到的以下文章：https://codeburst.io/building-react-widget-libraries-using-webpack-e0a140c16ce4