Question

使用React-intl进行UI Util Library的国际化。该库有一个文件夹，如i18n，其中我为不同的locales放置json文件。如果该库的用户想要添加对其他语言环境的支持，他/她可以为相应的语言环境添加带键/值对的附加json文件。

但是React-intl需要为previous中的相应语言环境导入和addLocaleData。例如，

import fr from 'react-intl/locale-data/fr';
addLocaleData([...fr]);

有没有办法addLocaleData并在React-intl中动态导入相应语言环境的语言环境库？

Answer 1

如果您使用的是webpack。您可以从应用程序中对代码中的不同区域设置数据进行代码拆分并动态加载。 Webpack 1仅支持require.ensure（），webpack 2也支持System.import（）。 System.import返回一个promise，而require.ensure使用一个回调。 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来转换代码。

Answer 2

嘿，我现在已经这样做了，如下所述及其工作： - ）

const possibleLocale = navigator.language.split('-')[0] || 'en';
addLocaleData(require(`react-intl/locale-data/${possibleLocale}`));

此处，通过navigator.language从浏览器中获取区域设置。希望这会有所帮助： - ）

如何使用React Intl动态添加语言环境数据？

2 个答案: