如何在不遇到生命周期问题的情况下将 React/Redux 应用程序嵌入到另一个 React/Redux 应用程序中? [英] How to embed a React/Redux app in another React/Redux app without running into lifecycle issues?
问题描述
App A 是一个独立的单页 React/Redux 应用程序,旨在插入其他应用程序(不一定用 React/Redux 编写).我正在尝试将应用程序 A 嵌入到另一个单页 React/Redux 应用程序 B 中,如下所示:
App A is a self-contained, single-page React/Redux application that is meant to be pluggable into other applications (not necessarily written in React/Redux). I'm trying to embed app A in another single-page React/Redux app B as follows:
在应用B中,创建一个组件ComponentA,其路由与应用A使用的路由相同,其
render()
方法生成一个DIV
标记以托管应用 A.
In app B, create a component, ComponentA, whose route is the same as that used by app A, and whose
render()
method generates aDIV
tag to host app A.
在 ComponentA 的 componentWillMount()
方法中,通过在末尾附加相应的 标签,加载之前为应用 A 构建的 js 包文档正文,这会导致应用 A 在页面上呈现.
In ComponentA's componentWillMount()
method, load the previously built js bundles for app A, by appending the corresponding <script>
tags at the end of the document body, which causes app A to render on the page.
这似乎工作正常,但是,当我离开 ComponentA 并返回时,我看到 Chrome Dev Tools 控制台中出现以下错误的次数与访问 ComponentA 的次数相同:未捕获(承诺)类型错误:无法读取 null 的属性replaceChild"".
This seems to work fine, however, when I navigate away from ComponentA and come back, I see the following error appear in the Chrome Dev Tools console as many times as I have accessed ComponentA: "Uncaught (in promise) TypeError: Cannot read property 'replaceChild' of null".
当我检查 Dev Tools 的React"选项卡时,我可以看到应用 A 的组件层次结构出现了多次,但实际上只有最后一个附加到物理 DOM.
When I examine the "React" tab of the Dev Tools, I can see app A's component hierarchy appear multiple times, however, only the last one is actually attached to the physical DOM.
我的猜测是,当我导航到应用程序 B 的其他部分(使用应用程序 B 的链接)时,应用程序 A 不知道路由更改,因此它永远不会卸载,这会导致一些意外行为和后续错误.
My guess is that when I navigate to other sections of app B (using app B's links), app A isn't aware of the route changes, so it is never unmounted, which causes some unintended behaviour and subsequent errors.
我是这项技术的新手,我想知道是否有可能在另一个 React/Redux 应用程序中嵌入一个 React/Redux 应用程序.如果是,那么我该如何改变我的方法以使其正常工作?
I'm new to the technology, and I'm wondering if it is even possible to embed a React/Redux app in another React/Redux app. If it is, then how could I change my approach to make it work properly?
我暂时没有包含任何代码片段,因为代码是非常标准的基本 React/Redux 代码,而且我质疑的是方法本身.
I haven't included any code snippets for now, because the code is pretty standard, basic React/Redux code, and it's the approach itself that I question.
推荐答案
我能够通过修改应用 A 入口点中的代码并更改应用的构建方式来解决该问题.
I was able to resolve the issue by modifying the code in app A's entry point and changing how the app is built.
修复前:
- 应用 A 是作为一个自包含、自我呈现的应用而构建的.
- 应用 B 的 ComponentA 正在其
componentWillMount()
方法中添加应用 A 的捆绑脚本标签. - 应用 A 的入口 JSX 正在立即执行
ReactDOM.render()
,并且无法从应用 B 中卸载它.
- App A was built as a self-contained, self-rendering application.
- App B's ComponentA was adding app A's bundle script tags in its
componentWillMount()
method. - App A's entry JSX was executing
ReactDOM.render()
immediately, and there was no way to unmount it from within app B.
修复后:
- 应用 A 构建为一个库(在 Webpack 配置中如此指定).
- App A 的入口 JSX 定义了库接口,暴露了自定义的
new()
、render()
和unmount()
方法. - 应用 A 的捆绑脚本标签硬编码在应用 B 的 index.html 中.
- 应用 B 的组件 A:
- 在
componentWillMount()
中:实例化应用程序 A. - 在
componentDidMount()
中:调用应用A的render(). - 在
componentWillUnmount()
中:调用应用A的unmount()
,后者调用ReactDOM.unmountComponentAtNode()
.
- App A is built as a library (specified as such in the Webpack config).
- App A's entry JSX defines the library interface, exposing custom
new()
,render()
, andunmount()
methods. - App A's bundle script tags are hardcoded in app B's index.html.
- App B's ComponentA:
- in
componentWillMount()
: instantiates app A. - in
componentDidMount()
: calls app A's render(). - in
componentWillUnmount()
: calls app A'sunmount()
, which callsReactDOM.unmountComponentAtNode()
.
我现在在React"选项卡中只看到应用 A 的组件层次结构的一个实例,并且控制台中不再出现错误.
I'm now seeing only one instance of app A's component hierarchy in the "React" tab, and no more errors appear in the console.
对于任何感兴趣的人,修复的灵感来自我最终遇到的以下文章:https://codeburst.io/building-react-widget-libraries-using-webpack-e0a140c16ce4
For anyone interested, the fix was inspired by the following article that I eventually came across: https://codeburst.io/building-react-widget-libraries-using-webpack-e0a140c16ce4
这篇关于如何在不遇到生命周期问题的情况下将 React/Redux 应用程序嵌入到另一个 React/Redux 应用程序中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
- in
- 在