如何使用模块联合将 i18n 实现到微前端应用程序中答案

【问题标题】：How to implement i18n into a micro-frontend application using Module Federation如何使用模块联合将 i18n 实现到微前端应用程序中
【发布时间】：2020-12-11 17:15:34
【问题描述】：

对于在模块联合微前端 next.js 应用中实现 i18n，您有什么建议？

目前（刚刚开始）我通过在_app.tsx 中声明提供程序来使用react-intl

  <IntlProvider locale={locale} defaultLocale={defaultLocale} messages={enMessages}>
    <SiteLayout>
      <Component {...pageProps}></Component>
    </SiteLayout>
  </IntlProvider>

然后，当从另一个微前端导入组件时，我将 intl 对象作为参数发送。

const XComponent = (await import('microApp2/XComponent')).default;
export default function ShellApp(): React.ReactElement {
  const intl = useIntl();
  return <XComponent intl={intl} />;
}

这样我就可以在微应用组件中使用它来格式化字符串了。

export default XComponent = (props: XComponentProps): React.ReactElement => {
  const { intl } = props;
  return (<div>{intl.formatMessage({ id: 'XComponent.Description' })}</div>);
}

这种方法的警告是我只能使用函数格式化，我不能使用 React DOM 标签，例如：

<FormattedMessage id="" />

我没有找到太多文档，所以不确定这是一个好方法。那些人知道或建议任何其他解决方案？

提前致谢！

【问题讨论】：

您是否与您的遥控器共享来自主机的相同反应？使用 i18n 组件会出现什么样的错误？
如果我使用<FormattedMessage /> 组件，它基本上说没有提供IntlProvider。这意味着无法从主应用程序包装器获得访问权限:(。这就是我需要传递实例的原因。

标签： next.js react-intl micro-frontend formatjs webpack-module-federation

【解决方案1】：

您可能需要用<IntlProvider> 包装您的每个主机，并从全球来源（如URL 或通过cookie 等的状态）获取您当前语言的值。

【讨论】：