App A是一个独立的单页React / Redux应用程序,可以插入其他应用程序(不一定用React / Redux编写).我正在尝试将app A嵌入到另一个单页React / Redux应用B中,如下所示：
>在应用B中,创建一个组件ComponentA,其路由与app A使用的相同,并且其render()方法为主机app A生成DIV标记.
>在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应用程序.如果是,那么我怎样才能改变我的方法以使其正常工作？
在修复之前：
> App A是作为一个独立的自我渲染应用程序构建的.
> App B的ComponentA正在其componentWillMount()方法中添加app A的bundle脚本标签.
> App A的条目JSX立即执行ReactDOM.render(),并且无法从应用程序B中卸载它.
修复后：
> App A构建为库(在Webpack配置中指定).
> App A的条目JSX定义了库接口,公开了自定义new(),render()和unmount()方法.
> App A的捆绑脚本标签在app B的index.html中进行了硬编码.
> App B的ComponentA：
> in componentWillMount()：实例化app A.
>在componentDidMount()中：调用app A的render().
> in componentWillUnmount()：调用app A的unmount(),它调用ReactDOM.unmountComponentAtNode().
我现在只在“React”选项卡中看到app A的组件层次结构的一个实例,并且控制台中不再出现错误.
对于任何感兴趣的人来说,修复的灵感来自于我最终遇到的以下文章：https://codeburst.io/building-react-widget-libraries-using-webpack-e0a140c16ce4
