如何在另一个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>在文档正文的末尾附加相应的标记来加载以前构建的应用程序A的js包,这会导致应用程序A在页面上呈现.

这似乎工作正常,但是,当我离开ComponentA并返回时,我看到Chrome Dev Tools控制台中出现以下错误的次数与访问ComponentA的次数一样多:"Uncaught(in promise)TypeError:无法读取属性'replaceChild'为null".

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

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

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

我暂时没有包含任何代码片段,因为代码是非常标准的,基本的React/Redux代码,而且这是我所质疑的方法本身.

Answer 1

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

修复前：

修复后：

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

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

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