微锋间的反应语境
如何在反应微锋之间使用单个上下文？
该应用程序分为多个微前端或反应应用程序。每个端口都运行在不同的端口上。一个容器承载着其他的微前端。每个应用都是一个单独的react应用程序，并且是一个运行时集成。(我使用martinfowler示例实现了微前端)
目前，通过URL和浏览器存储(localStorage/cookie)将一些数据传递给其他Micro前端。
我需要通过这些反应应用程序(MFE)传递数据，使用react上下文。
我已经在容器(ReactApp1)和存储值(例如color=black)中定义了color=black提供程序。要在较低级别的微前端(ReactApp2)中访问这种颜色，我们需要从任何微前端获取上下文。如何使它可用？
(注意:我不想使用localStorage或cookies进行全局数据共享)
<Container>
<LowerLevelMFE1/>
<LowerLevelMFE2/>
...
</Container>回答 3
Stack Overflow用户
发布于 2022-05-13 17:34:12
Webpack 5的模块联合会 & ModuleFederationPlugin是我找到的实现这种架构模式的最好方法。
本质上，您创建了一个“主机”应用程序，该应用程序将React.context封装在“远程”组件周围。这个“远程”实际上是独立应用程序中的另一个组件，它通过webpack配置文件作为远程公开。在第二个应用程序中，您将使用React.useContext正常地使用上下文。
您可以在github上找到此设置这里的完整示例。
有几件事要注意：
- 这两个应用程序都需要使用这个上下文的源代码，因此将其移动到自己的包中是首选。
- 您的上下文消费应用程序仍然需要，我在MFE中称之为“开发人员脚手架”。在这种情况下，这将是一个简单的组件，它将您的
<ContextConsumer />封装在从我在1. 中提到的共享上下文包导入的<ContextProvider />中。- 记住，这个带有脚手架的应用程序只公开了
<ContextConsumer />，您需要确保在webpack配置中指定它。
- 记住，这个带有脚手架的应用程序只公开了
Stack Overflow用户
发布于 2022-04-01 11:18:22
我认为在微前端之间共享上下文是一种反模式，如果可以的话，应该避免。如果您使用上下文来共享数据，您将自动耦合依赖于上下文的MFes，通过引入协调和依赖来消除独立部署的好处。
我的建议是，每个微前端加载它们所需的数据，如果有通信需要，则需要api或契约来处理这种通信。
Stack Overflow用户
发布于 2022-05-05 16:53:33
我认为，如果你需要mfe之间的那种沟通，那么他们就错了。
正如鲁本所说，这是一种反模式。
https://stackoverflow.com/questions/71532470
复制相似问题
腾讯云开发者
