言語翻訳のためのreact-intlの作業プロセスを理解できませんでした

Question

私はreactjsとreduxを使ってアプリを開発しました。私が使用している言語はスペイン語です。私はこのアプリを多言語にしたい。言語には2つの選択肢があります。 1つはデフォルトスペイン語で、もう1つは英語です。ユーザーが言語を選択するためのドロップダウンメニューがあります。ユーザーが英語を選択すると、すべての文字列を英語に変換する必要があります。私はreact-intlパッケージを見ましたが、メッセージプロップが何で、どのように内部に入るべきかを理解するのが非常に難しいです。IntlProvider私はその文書を理解することができませんでし

en.js

export default [ 
    { 
    "id": "Nav__registration_text", 
    "defaultMessage": "Registration", 
    }, 
    { 
    "id": "Nav__login_text", 
    "defaultMessage": "Login", 
    }, 
] 

import { connect } from 'react-redux'; 
import { IntlProvider } from 'react-intl'; 

function mapStateToProps(state) { 
    console.log('locale is', state.locale.locale); 
    return { locale: state.locale.locale }; 
} 
export default connect(mapStateToProps)(IntlProvider); 

import { Provider } from 'react-redux'; 
import { addLocaleData } from 'react-intl'; 
import en from 'react-intl/locale-data/en'; 
import es from 'react-intl/locale-data/es'; 
import App from './components/app'; 
import reducers from './reducers'; 

const createStoreWithMiddleware = applyMiddleware()(createStore); 

addLocaleData(en); 
addLocaleData(es); 

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <ConnectedIntlProvider> 
     <App /> 
    </ConnectedIntlProvider> 
    </Provider> 
    , document.querySelector('.app')); 

action.js 

export function selectedLocale(locale) { 
    console.log('locale', locale); 
    return { 
    type: 'LOCALE_SELECTED', 
    locale 
    }; 
} 

reducer 

const initialState = { 
    locale: 'es', 
}; 
export const localeReducer = (state = initialState, action) => { 
    switch (action.type) { 
    case 'LOCALE_SELECTED': 
     return { ...initialState, locale: action.locale }; 
    default: 
     return state; 
    } 
}; 


Nav.js 

import { intlShape, injectIntl, defineMessages } from 'react-intl'; 

const Nav = (props) => (
    <Router> 
    <div> 
     <nav className="navbar navbar-default"> 
     <div className="container-fluid"> 
      <div className="collapse navbar-collapse"> 
      <ul className="nav navbar-nav navbar-right nav-social-icon"> 
       <li className="dropdown"> 
       <a 
       href="" 
       className="dropdown-toggle" 
       data-toggle="dropdown" 
       role="button" 
       aria-haspopup="true" 
       aria-expanded="false" 
       > 
       ES 
       <span className="caret" /> 
       </a> 
       <ul className="dropdown-menu"> 
       <li onClick={() => props.selectedLocale('en-Us')}> 
        en-US 
       </li> 
       <li onClick={() => props.selectedLocale('es')}> 
        es 
       </li> 
       </ul> 
       </li> 
       <li className="btn-group"> 
       <button 
        className="btn btn-default" 
        onClick={props.showModal} 
       > 
        <Link to={{ pathname: '/signup' }}>Regístrate</Link> // wanted to change this to english when user selects english language from dropdown 
       </button> 
       <button 
        onClick={props.showModal} 
        className="btn btn-default" 
       > 
        <Link to={{ pathname: '/login' }}>Iniciar sesión</Link> 
       </button> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </nav> 
    </div> 
    </Router> 
); 

Nav.propTypes = { 
    intl: intlShape.isRequired, 
}; 
export default injectIntl(Nav); 

を：

今私は、次のように英語のための私のJSONファイルを作ってきました。これについて私を案内してください。

Answer 1

個人的にはi18n-react libraryをお勧めしますが、そのマニュアルは非常に簡単で使いやすいものです。そして私はそれを実装する方法を紹介します:)

何が必要です： - すべてのあなたのスペイン語と英語の翻訳とtranslation.js - これは一度 ファイルをtranslation.jsインポート - にすべてのページの国際化ライブラリのインポートコンポーネントで使用します。あなたはonTranslationいつでも言語間であなたのwannaスイッチ機能を呼び出すことができますofcourseの

import * as T from '../core/translations.js' 
import i18n from 'i18n-react'; 

onTranslation() { 
    i18n.setTexts(T.Translations("UK")); 
} 

：

export function Translations(language) { 
    if (language == 'UK') 
    { 
     return { 
      menu_title:      'Timeline', 
      menu_inbox:      'Messages' 
     } 
    } 
else if (language == 'ES') 
    { 
     return { 
      menu_title:      'Línea de tiempo', 
      menu_inbox:      'Mensajes' 
     } 
    } 

} 

あなたは、この翻訳ファイルをインポートし、現在の言語を設定する必要があります。

最後に、あなたはあなたのコンポーネントに訳語を使用することができます。

例えば、次のように：

render() 
    { 
     return (
      <div pageTitle={i18n.translate('menu_title')} > 
       <Content> 
        {i18n.translate('menu_inbox')} 
       </Content> 
      </div> 
     ) 
} 

私はあなたがそれを仕事と十分な私の答えは役に立ち見つけることができます願っています:)

幸運を！