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

Question

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

但是React-intl需要在之前的各个语言环境中导入和addLocaleData.例如,

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

有没有办法添加LocalData并在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来转换代码.