模块联合和 React Context 挂钩

Question

使用 React useContexthooks 时，当前需要从树中更高的组件导入才能传入对象Context。举例来说：

// index.jsx
export const MyContext = React.useContext('1')

export function MyApp(props){
  return (
    <MyContext.Provider value='1'>
        <ChildComponent />
    </MyContext.Provider>
  )
}

// ChildComponent.jsx
import {MyContext} from './index';

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

但如果子组件是联合的，它将单独位于一个单独的存储库中，并且无法从'./index'.

在该MyApp级别，我可以导入ChildComponent：

const ChildComponent= React.lazy(() => import('federatedApp/ChildComponent'))

前提是在 Webpack 配置中，被federatedApp命名为远程，并且 HTML 文档包含远程模块入口点 .js。但我怎样才能给MyContext遥控器federatedApp呢？

猜测答案：我需要将两个组件分成index.jsx两个文件并分别公开它们吗？