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

Question

我正在使用 React-intl 来实现 UI Util 库的国际化。该库有一个名为 i18n 的文件夹，其中我放置了不同区域设置的 json 文件。如果该库的用户想要添加对其他区域设置的支持，他/她可以放置带有相应区域设置的键/值对的附加 json 文件。

但是 React-intl 需要先导入并添加相应语言环境的LocaleData。例如，

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

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

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 来转译您的代码。