如何在另一個React / Redux應用程序中嵌入React / Redux應用程序而不會遇到生命周期問題？

Question

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應用程序。 如果是，那么我怎樣才能改變我的方法以使其正常工作？

我暫時沒有包含任何代碼片段，因為代碼是非常標准的，基本的React / Redux代碼，而且這是我所質疑的方法本身。

Answer 1

我能夠通過修改應用程序A的入口點中的代碼並更改應用程序的構建方式來解決問題。

在修復之前：

• 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：
  • 在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