我正在使用 React-intl 来实现 UI Util 库的国际化。该库有一个名为 i18n 的文件夹,其中我放置了不同区域设置的 json 文件。如果该库的用户想要添加对其他区域设置的支持,他/她可以放置带有相应区域设置的键/值对的附加 json 文件。
但是React-intl需要导入并添加之前的相应语言环境的LocaleData。例如,
import fr from 'react-intl/locale-data/fr';
addLocaleData([...fr]);
有没有办法在 React-intl 中动态添加 LocaleData 并导入相应语言环境的语言环境库?
如果您使用的是 webpack。您可以对应用程序中的不同区域设置数据进行代码分割并动态加载。 Webpack 1 仅支持 require.ensure(),webpack 2 还支持 System.import()。 System.import 返回一个承诺,而 require.ensure 使用回调。https://webpack.github.io/docs/code-splitting.html https://webpack.github.io/docs/code-splitting.html
使用 System.import()
import { addLocaleData } from 'react-intl';
const reactIntlLocaleData = {
fr: () => System.import('react-intl/locale-data/fr'),
en: () => System.import('react-intl/locale-data/en')
};
function loadLocaleData(locale){
reactIntlLocaleData[locale]()
.then((intlData) => {
addLocaleData(intlData)
}
}
使用 require.ensure()
import { addLocaleData } from 'react-intl';
const reactIntlLocaleData = {
fr: () => require.ensure([], (require) => {
const frData = require('react-intl/locale-data/fr');
addLocaleData(frData);
}),
en: () => require.ensure([], (require) => {
const enData = require('react-intl/locale-data/en');
addLocaleData(enData);
})
};
function loadLocaleData(locale){
reactIntlLocaleData[locale]();
}
根据您的开发环境,上面的代码可能会也可能不会工作。它假设您正在使用 Webpack2 和 Babel 来转译您的代码。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)