Javascript 如何在另一个React/Redux应用程序中嵌入React/Redux应用程序而不出现生命周期问题？_Javascript_Reactjs_Redux

Javascript 如何在另一个React/Redux应用程序中嵌入React/Redux应用程序而不出现生命周期问题？

javascript reactjs redux

Javascript 如何在另一个React/Redux应用程序中嵌入React/Redux应用程序而不出现生命周期问题？,javascript,reactjs,redux,Javascript,Reactjs,Redux,App A是一个独立的单页React/Redux应用程序，可插入其他应用程序（不一定是用React/Redux编写的）。我正在尝试将应用程序A嵌入到另一个单页React/Redux应用程序B中，如下所示：在应用程序B中，创建一个组件ComponentA，其路径与应用程序a使用的路径相同，并且其render（）方法生成一个DIV标记以承载应用程序a 在ComponentA的componentWillMount（）方法中，通过在文档体的末尾附加相应的标记，加载先前为app A构建的js捆绑包，从

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

在应用程序B中，创建一个组件ComponentA，其路径与应用程序a使用的路径相同，并且其
```
render（）
```
方法生成一个
```
DIV
```
标记以承载应用程序a
在ComponentA的
```
componentWillMount（）
```
方法中，通过在文档体的末尾附加相应的
标记，加载先前为app A构建的js捆绑包，从而使app A呈现在页面上

这似乎很好，但是，当我离开ComponentA返回时，我看到Chrome开发工具控制台中出现了以下错误，次数与我访问ComponentA的次数相同：“Uncaught（in promise）TypeError:无法读取null的属性'replaceChild'

当我检查Dev工具的“React”选项卡时，我可以看到appa的组件层次结构多次出现，但是，只有最后一个真正连接到物理DOM

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

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

我现在还没有包括任何代码片段，因为代码是相当标准的基本React/Redux代码，我质疑的是方法本身。

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

在修复之前：

应用程序A是作为一个自包含、自呈现的应用程序构建的
应用程序B的组件A正在其
```
componentWillMount（）
```
方法中添加应用程序A的捆绑脚本标记
应用程序A的条目JSX正在立即执行
```
ReactDOM.render（）
```
，无法从应用程序B中卸载它

修复后：

应用程序A构建为库（在网页包配置中指定）
应用程序A的条目JSX定义了库接口，公开了自定义的
```
new（）
```
、
```
render（）
```
和
```
unmount（）
```
方法
应用程序A的捆绑脚本标记在应用程序B的index.html中硬编码
应用程序B的组件A：
- 在
```
组件willmount（）
```
  中：实例化应用程序A
- 在
```
componentDidMount（）
```
  中：调用应用程序A的render（）
- 在
```
componentWillUnmount（）
```
  ：调用应用程序A的
```
unmount（）
```
  ，它调用
```
ReactDOM.unmountComponentAtNode（）
```

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

对于任何感兴趣的人来说，该修复程序都是从我最终遇到的以下文章中得到启发的：

感谢您的解释，但如果您能发送一些代码来查看此实现并查找问题，那就太好了。出于好奇，你为什么要同时使用这两种软件来做一个redux应用程序呢？您可以获取一个应用程序的JSON或状态，然后将其放到另一个应用程序上，这样您就有了一个单一的源代码，复杂性更低，问题更少。@Jan Cássio:谢谢您的回复。我决定做更多的研究，最终解决了这个问题（见下面我的答案）。至于你的问题，假设我理解正确，托管应用程序（B）是一个现有的应用程序，因此我无法控制其代码，而应用程序A是一个独立的单页应用程序，以便与其他应用程序更简单地集成。