2017-05-11 10 views
1

これは、私がクライアントを適切な言語をreact-intlでレンダリングするように設定する方法です。react/react-intlの言語jsonファイルを動的にインポート

import localeData from './translations/en.json'; 
//import localeData from './translations/xx.json'; <-- any language 

const render = routes => { 
    match({ history, routes }, (error, redirectLocation, renderProps) => { 
    ReactDOM.render(
     <HotEnabler> 
     <IntlProvider locale={locale} messages={localeData}> 
      <Provider store={store} app={app} restApp={restApp} key="provider"> 
      <Router {...renderProps} render={renderRouter} history={history}> 
       {routes} 
      </Router> 
      </Provider> 
     </IntlProvider> 
     </HotEnabler>, 
     dest 
    ); 
    }); 
}; 

render(getRoutes(store)); 

しかし私は、クッキー内のロケールに基づいて動的にlocaleDataをインポートしたいと思います。したがって、ユーザーのロケールが「en」の場合は、en.jsonファイルにのみロードされます。

const locale = Cookie.get('locale') || 'en'; 

const render = routes => { 
    match({ history, routes }, (error, redirectLocation, renderProps) => { 
    ReactDOM.render(
     <HotEnabler> 
     <IntlProvider locale={locale} messages={localeData}> 
      <Provider store={store} app={app} restApp={restApp} key="provider"> 
      <Router {...renderProps} render={renderRouter} history={history}> 
       {routes} 
      </Router> 
      </Provider> 
     </IntlProvider> 
     </HotEnabler>, 
     dest 
    ); 
    }); 
}; 

render(getRoutes(store)); 

これを行う正しい方法は何でしょうか?関数を作成しようとしましたが、メッセージに正しくデータを渡すことができません。

ありがとうございました

答えて

3

以下のコードで解決しました。誰かがそれを必要とする場合に備えて、ここに投稿してください。

const languages = { 
    en: require('./translations/en.json'), 
    zn: require('./translations/zn.json') 
}; 
const localeData = languages[locale]; 
関連する問題