Ant Design LocaleProviderをReact-Boilerplateで使用する方法

Question

このReact-Boilerplateを使い始めました。また、Ant Designを素晴らしいコンポーネントとして統合しようとしています。

import { LocaleProvider } from 'antd'; 
import enUS from 'antd/lib/locale-provider/en_US'; 
return ( 
<LocaleProvider locale={enUS}> 
<AppWrapper> 
... 
</AppWrapper> 
</LocaleProvider> 
); 

をそして、それはantdコンポーネントのための完璧な作業だ -

は、Antのデザインのドキュメントから、私はこのようなリアクト-定型のAppWrapperのラッパーを作成しました。

私はこれをどのように反応定型文のi18nで使用できるのか知りたかったのです。または、上の方法でこれを行う正しい方法ですか？

Answer 1

これはあなたが言語の変更はに伝播する場合は、antdのLocaleProviderと国際化librarysラッパーを混合する際に注意する必要があります一般的に正しいLocaleProviderを使用する方法、はい、しかし...

ですどちらも。

React-Boilerplateの場合、ロケールはReduxに格納されます。アプリケーションがロケールを更新できるようにするには、<LocaleProvider>をinsideのReduxプロバイダに挿入する必要があります。それ以外の場合は、ロケールの状態にアクセスできません。

だからあなたapp.jsニーズのようなものになるために：

<Provider store={store}> 
    <LanguageProvider messages={messages}> 
     <LocaleProvider locale={...}> 
      <Router ... /> 
     </LocaleProvider> 
    </LanguageProvider> 
</Provider>, 

antdのLocaleProviderは引数として、単純なロケールID文字列ではなく、ロケールを持つオブジェクトを負いませんので、残念ながら、これは、十分ではありません情報そのもの。

つまり、<LocaleProvider>を上記のようにラッパーチェーンに挿入することはできません。 Reduxロケールに接続し、<LocaleProvider>をReduxの文字列IDに基づいて正しいロケールオブジェクトにフィードする独自のコンポーネントを作成する必要があります。

私は同様の構造を持ち、Intl（Intlの代わりにi18nextを使用していました）に適合したプロジェクトからリッピングした（テストされていない）コードです。それを行うための方法のアイデアを与える必要があります。

import React from 'react'; 
import { Router } from 'react-router'; 
import { Provider, connect } from 'react-redux'; 
import en_US from 'antd/lib/locale-provider/en_US'; 
import sv_SE from 'antd/lib/locale-provider/sv_SE'; 
import { LocaleProvidern } from 'antd'; 

class AntDesignPlusRouter extends React.Component { 
    state = { 
     antd_locale: en_US 
    } 

    componentWillUpdate(next) { 
     let { locale } = next 
     if(!locale || locale === this.props.locale) return; 

     switch(locale) { 
      case 'sv': 
       this.setState({ antd_locale: sv_SE }); 
       break; 
      default: 
      case 'en': 
       this.setState({ antd_locale: en_US }); 
       break; 
     } 
    } 

    render() { 
     return (
      <LocaleProvider locale={this.state.antd_locale}> 
       <Router {...this.props} /> 
      </LocaleProvider> 
     ) 
    } 
} 

const WrappedAntDesignPlusRouter = connect(
     function mapStateToProps(state) { 
      return { 
       locale: state.locale 
      } 
     }, 
     function mapDispatchToProps(dispatch) { 
      return {} 
     } 
)(AntDesignPlusRouter); 



class App extends React.Component { 
    render() { 
     return (
       <Provider ...> 
        <LanguageProvider ...> 
         <WrappedAntDesignPlusRouter/> 
        </LanguageProvider > 
       </Provider> 
     ); 
    } 
}