封装 React 应用程序的最佳方法是啥？

Posted 2023-02-19

【中文标题】封装 React 应用程序的最佳方法是啥？

【英文标题】：What is the best way to encapsulate React app?封装 React 应用程序的最佳方法是什么？

【发布时间】：2020-01-05 02:13:53

【问题描述】：

我正在尝试在 Web 组件的 Shadow Root 或 iFrame 中封装 React 应用程序 以构建 widget strong> 对于像 Intercom 小部件这样的聊天机器人信使。

我正在使用：

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，因为它们都将样式放在 light DOM header 中。但是，我想出了如何处理这两个问题（我可以帮助任何有同样问题的人）。 [已解决]

然后我的组件渲染没有问题，但是事件不起作用，经过一些研究我发现当你在Shadow DOM中渲染一个react组件时，事件不会被调度到react。 IE。当用户单击您的反应组件时，没有任何反应。所以我使用this repo 来解决这个问题，并重新定位和调度事件到 React。 [部分解决]

但不幸的是，这还不够，因为像 onChange 这样的一些事件没有得到修复，而像 Material-UI 这样的深度添加了自己的事件，问题在于 React 它自己检查了这个 issue 并且他们不太有动力在近期内修复它。[ISSUE]

所以我决定改用另一种封装方式，即iFrame。我还没有找到有用的 tuto、repo 或线程，并且所有现有的 npm 模块都没有更新，也没有针对 Typescript 进行优化。 我需要一种清晰的方法将我的应用程序封装在iFrame 的#document 中。

请提出一个回购协议。或给我任何实施的想法，任何想法都可能非常有帮助。

【问题讨论】：

我不明白为什么 IFRAME 不起作用？您是否删除了在切换到使用 IFRAME 后添加的所有其他 stuff（即，不应要求所有这些事件重定向）。 IFRAME 非常像一个单独的窗口。此外，当使用 IFRAME 时，您应该能够在单独的窗口中测试您的 REACT，以确保它可以独立运行。

@AlexisWilke 首先，我天真地试图将我的应用程序放在原生 html 框架中，但应用程序呈现在 #document 旁边，因此没有获得任何封装。然后我从 npm 和 github 尝试了一堆旧的且未维护的存储库，但我没有成功使用 Typscript 运行它们中的任何一个。

@AlexisWilke 当然我删除了所有 Web 组件的东西..

【参考方案1】：

最后，我确实成功地将我的应用封装在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。