在Module Federation中如何简便地从宿主向子模块共享React Context API对象？

当然有不用打包成独立Node模块的简便方案，下面是几种实用的实现方式：

方案1：通过Module Federation的shared直接暴露Context #

不用额外封装Node模块，直接在宿主的Webpack配置里把Context文件标记为共享模块，子模块直接导入使用：

宿主Webpack配置 #

new ModuleFederationPlugin({
  name: 'host',
  exposes: {},
  shared: {
    'react': { singleton: true },
    'react-dom': { singleton: true },
    // 直接暴露宿主的Context文件
    './src/contexts/AppContext': {
      singleton: true,
      import: './src/contexts/AppContext'
    }
  }
})

子模块代码 #

// 直接从宿主导入共享的Context
import AppContext from 'host/src/contexts/AppContext';
import { useContext } from 'react';

function RemoteComponent() {
  const contextValue = useContext(AppContext);
  return <div>子模块获取到的Context值：{contextValue.userName}</div>;
}

方案2：宿主通过Provider包裹子模块组件（最轻量化） #

如果不想改动Webpack的共享配置，只需要在宿主加载子模块时，把宿主的Context Provider包裹在子模块的挂载容器外，子模块就能自动读取宿主的Context：

宿主代码 #

import { mount } from 'remoteApp/EntryComponent';
import AppContext from './src/contexts/AppContext';

function HostContainer() {
  const contextValue = { userName: '张三', theme: 'dark' };
  
  return (
    <AppContext.Provider value={contextValue}>
      <div id="remote-root"></div>
    </AppContext.Provider>
  );
}

// 挂载子模块，此时子模块的所有组件都处于宿主Context的作用域内
mount(document.getElementById('remote-root'));

子模块代码 #

import AppContext from './src/contexts/AppContext'; // 确保结构和宿主的Context一致
import { useContext } from 'react';

function RemoteComponent() {
  const { userName } = useContext(AppContext);
  return <div>欢迎，{userName}</div>;
}

注意：要确保宿主和子模块共享同一个React实例，在双方的Webpack配置里把react和react-dom设为singleton共享即可。

方案3：宿主暴露Context Provider组件给子模块 #

如果子模块需要自主控制Context的作用范围，可以在宿主里把Context Provider作为组件暴露出去，子模块导入后使用：

宿主Webpack配置 #

new ModuleFederationPlugin({
  name: 'host',
  exposes: {
    './AppContextProvider': './src/contexts/AppContextProvider'
  },
  shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})

宿主的Provider组件 #

// src/contexts/AppContextProvider.jsx
import AppContext from './AppContext';

export default function AppContextProvider({ children }) {
  const contextValue = { userName: '张三', theme: 'dark' };
  return <AppContext.Provider value={contextValue}>{children}</AppContext.Provider>;
}

子模块代码 #

import AppContextProvider from 'host/AppContextProvider';
import AppContext from './src/contexts/AppContext';
import { useContext } from 'react';

function RemoteApp() {
  return (
    <AppContextProvider>
      <div>
        <InnerComponent />
      </div>
    </AppContextProvider>
  );
}

function InnerComponent() {
  const { theme } = useContext(AppContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>子模块内容</div>;
}

方案对比 #

• 方案1：适合子模块多处使用Context的场景，一次配置全局可用
• 方案2：最简便，无额外配置，仅需宿主控制挂载上下文
• 方案3：适合子模块需要自主管理Provider范围的场景

内容的提问来源于stack exchange，提问作者copenndthagen