MPA 中的反应上下文（不同应用程序的一个上下文）答案

【问题标题】：React context in MPA (one context for different apps)MPA 中的反应上下文（不同应用程序的一个上下文）
【发布时间】：2020-10-06 11:51:35
【问题描述】：

我在一页上渲染了几个反应“sn-ps”

ReactDOM.render(<MainNavSearchApp />, document.getElementById('main-nav-search-app'));
ReactDOM.render(<NavSearchBrandsApp />, document.getElementById('main-nav-search-brands-app'));

并希望为他们使用一个上下文

class MainNavSearchApp extends React.Component {
    render() {
        return (
            <div>
                <NavSearchContextProvider>
                    <MainNavSearch />
                </NavSearchContextProvider>
            </div>
        );
    }
}
export default MainNavSearchApp; 

class NavSearchBrandsApp extends React.Component {
    render() {
        return (
            <div>
                <NavSearchContextProvider>
                    <NavSearchBrands />
                </NavSearchContextProvider>
            </div>
        );
    }
}

export default NavSearchBrandsApp;

但如果我在一个应用程序中更新上下文，它不会在另一个应用程序中更新。据我了解，React 创建了两个“克隆”独立上下文。多个实例可以使用相同的上下文吗？

【问题讨论】：

标签： javascript reactjs react-hooks react-context

【解决方案1】：

是的，您可以像 data in React flows down 一样，它们必须有一个共同的父级才能共享相同的上下文数据。

这通常称为“自上而下”或“单向”数据流。任何状态始终归某个特定组件所有，从该状态派生的任何数据或 UI 只能影响树中“低于”它们的组件。

因此，共同的父级应该使用ReactDOM.createPortal，并渲染提供者，而其他组件将是他的子级。

<body>
    <div id="root"></div>
    <div id="app1"></div>
    <div id="app2"></div>
</body>

// Common parent - MUST
function Root() {
  return (
    <Context.Provider value={42}>
      {ReactDOM.createPortal(<App1 />, document.getElementById("app1"))}
      {ReactDOM.createPortal(<App2 />, document.getElementById("app2"))}
    </Context.Provider>
  );
}

// MainNavSearchApp
function App1() {
  const val = React.useContext(Context);
  return <>App1: {val}</>;
}

// NavSearchBrandsApp
function App2() {
  const val = React.useContext(Context);
  return <>App2: {val}</>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Root />, rootElement);

【讨论】：