我试图将 React应用封装在 Web组件的影子根或 iFrame 中，以构建小工具 strong>，例如对讲机小部件之类的Chatbot Messenger。
我正在使用：
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官方文档（没有提及我的任何问题）。
首先，我遇到了一些样式问题，涉及样式组件和Material-UI，因为它们都将样式放在了浅DOM标头中。但是，我弄清楚了如何解决这两个问题（我可以帮助遇到相同问题的任何人）。 [已解决]
然后，我的组件呈现没有问题，但是事件不起作用，经过一番研究，我发现在Shadow DOM内部渲染React组件时，将不会调度事件。即当用户单击您的反应组件时，什么也不会发生。所以我用this回购解决了这个问题，并重新定位并分发事件到React。 [部分解决]
但是不幸的是，这还不够，因为某些事件，例如onChange并没有得到解决，而某些深度（例如Material-UI）则添加了自己的事件，问题在于React自己检查了{{3 }}，他们并没有那么快去解决这个问题。[ISSUE]
因此，我决定移动到另一个封装方式，即 iFrame 。我还没有找到有用的tuto，repo或线程，并且所有现有的npm模块都没有更新，也没有针对Typescript进行优化。
我需要一种明确的方法将我的应用程序封装在#document的{{1}}中。
请提出一个回购协议。或给我任何实现的想法，任何想法都可能会很有帮助。
答案 0 :(得分：0)
最后，我确实将应用程序成功封装在#document的{{1}}中。
iframe我只是忘记指向// 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。