我正在尝试将使用 globalize npm 包生成的格式化程序集成到基于 next.js 的应用程序中。格式化程序存储在特定于语言环境的文件中。想法是根据当前语言环境动态导入特定于语言环境的格式化程序。当前的语言环境信息可通过页面的 getInitialProps 方法中的 next-i18next 集成获得,但由于格式化程序包含在 getInitialProps 中导入格式化程序并将它们与初始道具一起传递的函数,因此不起作用。
实现所需行为的任何潜在解决方法是什么?
我正在尝试将使用 globalize npm 包生成的格式化程序集成到基于 next.js 的应用程序中。格式化程序存储在特定于语言环境的文件中。想法是根据当前语言环境动态导入特定于语言环境的格式化程序。当前的语言环境信息可通过页面的 getInitialProps 方法中的 next-i18next 集成获得,但由于格式化程序包含在 getInitialProps 中导入格式化程序并将它们与初始道具一起传递的函数,因此不起作用。
实现所需行为的任何潜在解决方法是什么?
我最终将 HOC 与动态导入一起使用:
const formatters = {};
LOCALES.forEach((locale) => {
formatters[locale] = dynamic(() => {
return import(`../../public/static/globalize/locales/${locale}/formatters-${locale}.js`);
});
});
export default function withFormatter(Page) {
const PageWithFormatter = (props) => {
const lang = i18n.language || props.currentLanguage || 'en';
const formatter = formatters[lang]('').type(lang);
return (
<GlobalizeContext.Provider value={{ formatter }}>
<Page {...props} />
</GlobalizeContext.Provider>
);
};
PageWithFormatter.getInitialProps = async ({ req }) => {
const currentLanguage = req ? req.language : '';
return { currentLanguage };
};
return PageWithFormatter;
}