2

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

目前（刚刚开始）我react-intl通过在_app.tsx

  <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="" />

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

提前致谢！

4

1 回答 1

0

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

于 2020-12-29T21:43:14.333 回答