2016-11-22 2 views
1

私は翻訳のためにreact-intlパッケージを使用しています。ユーザーがスペイン語と英語を選択できる機能があります。デフォルトでは、スペイン語が使用されます。ユーザーが英語を選択した場合は、すべてのテキストを英語とスペイン語とスペイン語に翻訳する必要があります。ロケールとそのメッセージを格納するアクションと減速器を作成しました。コンポーネントはロケールとメッセージをプロップとして受け取ります。ロケールとメッセージを動的に渡すこともできます。動的には、ユーザーが英語を選択すると、ロケールが「en」とそのメッセージに応じて取得されます。メッセージを動的にレンダリングするには

しかし、メッセージ/テキストを動的に表示できませんでした。次のエラーが発生する

メッセージをフォーマットできません: "Nav__registration_text"、メッセージIDは フォールバックです。ここで

私は解決策を見つけた私のコード

export const SPANISH_STATE = { 
    lang: 'es', 
    messages: { 
     'nav.registration.text': 'Registrate', 
     'nav.login.text': 'Incesar', 
    } 
}; 

export const ENGLISH_STATE = { 
    lang: 'en', 
    messages: { 
     'nav.registration.text': 'Registration', 
     'nav.login.text': 'Login', 
    } 
}; 

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

function mapStateToProps(state) { 
    const { lang, messages } = state.locale; 
    return { locale: lang, key: lang, messages }; 
} 
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 

import { SPANISH_STATE } from '../../message/es'; 
import { ENGLISH_STATE } from '../../message/en'; 

const initialState = { 
    lang: SPANISH_STATE.lang, 
    messages: SPANISH_STATE.messages 
}; 
export const localeReducer = (state = initialState, action) => { 
    switch (action.type) { 
    case 'LOCALE_SELECTED': 
    if (action.locale === 'es') { 
     return { ...initialState, lang: SPANISH_STATE.lang, messages: SPANISH_STATE.messages }; 
    } else if (action.locale === 'en') { 
     return { ...initialState, lang: ENGLISH_STATE.lang, messages: ENGLISH_STATE.messages }; 
    } break; 
    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' }}> 
        <FormattedMessage 
         id='Nav__registration_text' 
         description='This is a registration text' 
        /> 
        </Link> // By default, Spanish text is shown Registrate but if user selects English, Registration should be shown 
       </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); 
+0

[React-Intlの入力プレースホルダでFormattedMessageを使用する方法](https://stackoverflow.com/questions/39630620/react-intl-how-to-use-formattedmessage-in-input-placeholder)の可能な複製 – rofrol

答えて

0

です。すべて順調。私は翻訳されたメッセージを好きな場所、私はどうなる

{intl.formatMessage({ID: 'そのメッセージ/文字のキー'})}私のナビでregistrateの場合、例えば

私はやるだろう

<Link to={{ pathname: '/signup' }}> 
    {props.intl.formatMessage({ id: 'nav.registration.text' }) } 
</Link> 

similarly for login 

<Link to={{ pathname: '/login' }}> 
    {props.intl.formatMessage({ id: 'nav.login.text' }) } 
</Link> 

これが他の人に役立つことを願っています。

関連する問題