如何動態呈現郵件

Question

我正在使用react-intl軟件包進行翻譯。用戶可以在西班牙語和英語之間進行選擇。默認情況下，使用西班牙語。如果用戶選擇英文，所有文本都應該翻譯成英文，如果西班牙文和西班牙文翻譯成英文。我創建了一個動作，還有一個Reducer，它存儲了語言環境和消息。該組件接受語言環境和消息作爲道具。我也可以動態地傳遞語言環境和消息。動態地，我的意思是當用戶選擇英語時，將語言環境設置爲'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); 

Answer 1

我找到了解決辦法。一切安好。只要我想翻譯的消息，我會做

{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> 

。我希望這會幫助其他人。