reactjs - React mfe：mfe 之间的通信

Question

使用 react 17，我正在尝试使用 mfe 演示。有一个父容器包含两个 mfe，Header 和 Auth。

当用户登录时，容器会收到通知。收到此通知后，需要通知标头组件有关此事件并允许更新自身。

目前，容器可以从Auth-mfe获取消息，但对Header组件如何使用容器订阅此消息感到震惊。

目标是最小化或消除 mfe 之间的直接通信，如果需要，它必须通过父容器。

我没有使用 redux 或任何第三方库来存储状态。用户会话详细信息当前由Auth-mfe存储在 sessionStorage 中。

容器 app.js 片段是

function App() {
return (
    <BrowserRouter>
            <div>
                <Header notifySignedIn={notifySignedIn} />
                <Suspense fallback={<Progress />}>
                    <Switch>
                        <Route path="/auth" render={props => (<AuthLazy onSignin={onSignin} {...props} /> )} />
                    </Switch>
                </Suspense>
                <Footer />
            </div>
    </BrowserRouter>
);

}

导出默认应用程序；

标签： reactjscallbacksubscribe

Answer 1

参考这篇文章，我实现了从 container => header 传递回调函数，然后 header 将 subscribe 函数传递回容器。这样就可以了。