Module Federation场景下如何向联邦远程组件传递React Context

你提到的将Context从业务组件中拆分单独对外暴露的思路完全可行，除此之外还有2种低耦合的可选方案，具体实现如下：

方案1：Context作为共享模块暴露（你提到的思路实现） #

该方案的核心是通过模块联邦的能力，将本地定义的Context共享给远程应用使用，前提是必须保证宿主和远程应用使用同一个React实例，否则跨实例的Context无法生效：

1. 宿主应用（MyApp所在应用）webpack配置调整：
   在ModuleFederationPlugin的exposes字段中加入Context的导出路径，同时将react、react-dom设为单例共享：

// 宿主webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      exposes: {
        './MyContext': './src/MyContext' // 将Context单独拆分为文件后暴露
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
}

2. 远程应用（federatedApp）webpack配置调整：
   在remotes字段中引入宿主应用的远程入口，同时同样配置react、react-dom为单例共享：

// 远程应用webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'federatedApp',
      remotes: {
        hostApp: 'hostApp@http://宿主应用部署地址/remoteEntry.js'
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
}

3. 远程组件中直接导入共享的Context即可正常使用：

// ChildComponent.jsx
import { MyContext } from 'hostApp/MyContext';
import { useContext } from 'react';

export function ChildComponent(props){
  const context = useContext(MyContext);
  return (<p> {context} </p>)
}

4. 宿主侧无需额外调整，正常用MyContext.Provider包裹远程引入的ChildComponent即可。

方案2：工厂函数动态注入Context（低耦合推荐） #

如果不想让远程应用强依赖宿主的暴露模块，适合远程组件需要给多个不同宿主使用的场景，可以用工厂函数的方式动态传入Context实例：

1. 远程应用改造组件导出逻辑，不要硬编码依赖具体Context：

// 远程应用ChildComponent.jsx
import { useContext } from 'react';

// 对外暴露工厂函数，接收Context作为参数
export function createChildComponent(MyContext) {
  return function ChildComponent(props) {
    const context = useContext(MyContext);
    return <p>{context}</p>;
  }
}

2. 宿主侧引入工厂函数，传入本地Context生成组件后使用：

// 宿主index.jsx
import { MyContext } from './MyContext';
const CreateChildComponent = React.lazy(() => import('federatedApp/createChildComponent'));

export function MyApp(props){
  const ChildComponent = CreateChildComponent(MyContext);
  return (
    <MyContext.Provider value='1'>
      <React.Suspense fallback="加载中">
        <ChildComponent />
      </React.Suspense>
    </MyContext.Provider>
  )
}

方案3：Props透传Context值（轻量场景推荐） #

如果Context结构简单、变动频率低，不想改造双方的webpack配置，可以直接把Context的当前值通过props传递给远程组件，远程组件直接使用props即可，无需调用useContext，实现成本最低。

注意事项 #

无论使用哪种方案，都需要保证宿主和远程应用的React、React-Dom版本兼容，且模块联邦配置中标记为单例，避免多React实例导致的Context隔离问题。

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