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

Question

我正在使用 React-intl 对 UI Util 库进行国际化。该库有一个文件夹说 i18n，其中我为不同的 json 文件放置了 locales.If 该库的用户想要添加对其他语言环境的支持，he/she 可以放置额外的 json 文件key/value 对各自的语言环境。

但是 React-intl 需要在 prior.For 示例中为各自的语言环境导入和添加 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 returns 承诺，而 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 动态添加语言环境数据？

How to add locale data dynamically using React Intl?

react-intl

babel-plugin-react-intl