React Intlを使用してロケールデータを動的に追加する方法は？

Question

UI Utilライブラリの国際化にReact-intlを使用しています。ライブラリにはi18nと言うフォルダがあります。このライブラリのユーザは、別のロケール用のjsonファイルを配置します。このライブラリのユーザが追加のロケールのサポートを追加したい場合、それぞれのロケールのキー/値のペアを含むjsonファイルを追加できます。

しかしリアクト・インターナショナルは、インポートしaddLocaleData prior.Forの例では、各ロケールのために、

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

がaddLocaleDataに方法はありますして反応-国際空港で動的にそれぞれのロケールのロケールライブラリをインポートする必要があり？

Answer 1

ちょっと私は

const possibleLocale = navigator.language.split('-')[0] || 'en'; addLocaleData(require( :-)以下に説明するように、今、これを実行し、その作業たが反応・インターナショナル/ロケールデータ/ $ {possibleLocale}ここ));

、ロケールからフェッチされますブラウザからnavigator.language。 これは役に立ちます:-)

Answer 2

ウェブパックを使用している場合。あなたは、アプリケーションから異なるロケールデータをコード分割し、動的にロードすることができます。 Webpack 1はrequire.ensure（）のみをサポートし、webpack 2はSystem.import（）もサポートしています。 require.ensureがコールバックを使用している間、System.importは約束を返します。開発環境のコードは上記または動作しない場合があり応じrequire.ensureでSystem.importでhttps://webpack.github.io/docs/code-splitting.html

（）

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) 
    } 
} 

（）

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](); 
} 

。あなたがコードを翻訳するためにBabelと一緒にWebpack2を使用していることを前提としています。