对于在模块联合微前端next.js应用中实现i18 n,你有什么建议?
目前(刚刚开始),我通过在_app.tsx
中声明提供程序,让它与react-intl
一起工作
<IntlProvider locale={locale} defaultLocale={defaultLocale} messages={enMessages}>
<SiteLayout>
<Component {...pageProps}></Component>
</SiteLayout>
</IntlProvider>
然后,当从另一个微前端导入组件时,我会将intl
对象作为param发送。
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="" />
我没有找到太多的文档,所以不确定这是一个好方法。有没有人知道或建议其他解决方案?
先谢谢你了!
1条答案
按热度按时间x8diyxa71#
您可能需要用
<IntlProvider>
Package 每个主机,并从全局源获取当前语言的值(如URL或通过cookie等的状态)。