Блог

Главная - Вопросы по программированию - Федерация модулей и контекстные крючки реагирования

Федерация модулей и контекстные крючки реагирования

#javascript #reactjs #webpack #micro-frontend #webpack-module-federation

Вопрос:

При использовании useContext крючков React в настоящее время для передачи объекта требуется импорт из компонента, расположенного выше в дереве 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 на два файла и предоставлять их оба отдельно?

Метки: