封装 React 应用程序的最佳方式是什么？
What is the best way to encapsulate React app?
我正在尝试将 React 应用程序 封装到 Web 组件的 Shadow Root 或 iFrame 构建一个 小部件 用于像 Intercom 小部件这样的 Chatbot 信使。
我正在使用：
React 16.8.6
Typescript 3.5.3
Redux 4.0.4
Styled-components 4.3.2
Material-UI 4.3.3
我的 Web 组件选择基于 this React 官方文档 （没有提到我的任何问题）。
首先，我遇到了一些风格问题，styled-components和Material-UI，因为他们都把自己的风格放在了光DOM header。但是，我想出了如何处理这两个 问题（我可以帮助遇到同样问题的任何人）。 [已解决]
然后我的组件渲染没有问题，但是事件不工作，经过一些研究我发现当你在 Shadow DOM 事件中渲染一个反应组件时不会被派遣反应。 IE。当用户点击你的 React 组件时，什么也没有发生。所以我使用 this repo 来解决这个问题，并 重新定位和调度事件 到 React。 [PARTIALLY-SOLVED]
但不幸的是，这还不够，因为像onChange这样的事件没有得到修复，而像Material-UI这样的深度添加了他们自己的事件，问题在于React它自检这个 issue 并且他们没有那么积极地在近期修复它。[问题]
所以我决定转向另一种封装选择，iFrame。我还没有找到有用的 tuto、repo 或线程，所有现有的 npm 模块都没有更新，也没有针对 Typescript 进行优化。
我需要一种清晰的方法来将我的应用程序封装在 iFrame 的 #document 中。
请提出一个回购协议。或者给我任何实施的想法，任何想法都可能非常有帮助。
最后，我成功地将我的应用程序封装在 iframe 的 #document 中。
// Create iframe.
const iFrame: any = document.createElement("iframe")
document.body.appendChild(iFrame)
// Create react entry point.
const mountPoint = document.createElement("div")
iFrame.contentWindow.document.body.appendChild(mountPoint)
ReactDOM.render(<App />, mountPoint)
我只是忘记指向 x.contentWindow.document.body 元素，而是直接指向 iframe。
我正在尝试将 React 应用程序 封装到 Web 组件的 Shadow Root 或 iFrame 构建一个 小部件 用于像 Intercom 小部件这样的 Chatbot 信使。
我正在使用：
React 16.8.6
Typescript 3.5.3
Redux 4.0.4
Styled-components 4.3.2
Material-UI 4.3.3
我的 Web 组件选择基于 this React 官方文档 （没有提到我的任何问题）。
首先，我遇到了一些风格问题，styled-components和Material-UI，因为他们都把自己的风格放在了光DOM header。但是，我想出了如何处理这两个 问题（我可以帮助遇到同样问题的任何人）。 [已解决]
然后我的组件渲染没有问题，但是事件不工作，经过一些研究我发现当你在 Shadow DOM 事件中渲染一个反应组件时不会被派遣反应。 IE。当用户点击你的 React 组件时，什么也没有发生。所以我使用 this repo 来解决这个问题，并 重新定位和调度事件 到 React。 [PARTIALLY-SOLVED]
但不幸的是，这还不够，因为像onChange这样的事件没有得到修复，而像Material-UI这样的深度添加了他们自己的事件，问题在于React它自检这个 issue 并且他们没有那么积极地在近期修复它。[问题]
所以我决定转向另一种封装选择，iFrame。我还没有找到有用的 tuto、repo 或线程，所有现有的 npm 模块都没有更新，也没有针对 Typescript 进行优化。
我需要一种清晰的方法来将我的应用程序封装在 iFrame 的 #document 中。
请提出一个回购协议。或者给我任何实施的想法，任何想法都可能非常有帮助。
最后，我成功地将我的应用程序封装在 iframe 的 #document 中。
// Create iframe.
const iFrame: any = document.createElement("iframe")
document.body.appendChild(iFrame)
// Create react entry point.
const mountPoint = document.createElement("div")
iFrame.contentWindow.document.body.appendChild(mountPoint)
ReactDOM.render(<App />, mountPoint)
我只是忘记指向 x.contentWindow.document.body 元素，而是直接指向 iframe。