React mfe：mfe 之间的通信

Question

对于 React 17，我正在尝试使用 mfe 演示。有一个 parent 容器，其中包含两个 mfe，Header 和 Auth。

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

目前容器可以从 Auth-mfe 获取消息，但对 Header 组件的方式感到震惊用容器订阅这个。

目标是尽量减少或消除 mfe 之间的直接通信，如果需要，它必须通过 parent 容器。

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

容器 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>
);

}

导出默认应用；

Answer 1

参考这个，我实现了从容器=> header 传递回调函数，然后header 将订阅函数传递回容器。这样就可以了。

Answer 2

    //add the code in componentdidmount where you want to receive the data
window.addEventListener("event-name", (datarecieved)=> {
    console.log(datarecieved.detail);
}, false);

//Create an event to pass data
let send-data = new CustomEvent("event-name", {detail: "Hi Suraj here"});
window.dispatchEvent(send-data);

React mfe：mfe 之间的通信

React mfe: Communication between mfe's

callback

subscribe

reactjs