2

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

但是 React-intl 需要在之前为各自的语言环境导入和添加LocaleData。例如，

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

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

4

2 回答 2

9

如果你使用的是 webpack。您可以对应用程序中的不同语言环境数据进行代码拆分并动态加载。Webpack 1 仅支持 require.ensure() 而 webpack 2 也支持 System.import()。System.import 返回一个承诺，而 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 来编译你的代码。

于 2016-12-22T16:03:43.487 回答
-4

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

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

在这里，语言环境是通过 navigator.language 从浏览器中获取的。希望这可以帮助 ：-）

于 2017-01-09T08:29:47.750 回答