Wie rende ich die Nachricht dynamisch

Question

Ich benutze React-Intl-Paket für Übersetzungszwecke. Es gibt eine Funktionalität für den Benutzer zwischen Spanisch und Englisch zu wählen. Standardmäßig wird Spanisch verwendet. Wenn der Benutzer für Englisch auswählt, sollte der gesamte Text ins Englische übersetzt werden und wenn Spanisch dann Spanisch ist. Ich habe eine Aktion und auch Reducer erstellt, die das Gebietsschema und seine Nachricht speichert. Die Komponente akzeptiert Gebietsschema und Nachricht als Prop. Ich könnte das Gebietsschema und die Nachricht auch dynamisch weitergeben. Mit "dynamisch" meine ich, wenn der Benutzer die englische Sprache auswählt, erhält das Gebietsschema "en" und die entsprechende Nachricht.

Aber ich konnte die Nachricht/den Text nicht dynamisch rendern. Ich bekomme folgende Fehlermeldung

Nachricht kann nicht formatiert werden: "Nav__registration_text", Nachrichten-ID als Fallback verwenden.

Hier ist mein Code

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

ich die Lösung gefunden. Alles ist gut. Überall dort, wo ich die übersetzte Nachricht möchten, würde ich tun

{intl.formatMessage ({id: 'Schlüssel der Nachricht/Text'})}

Zum Beispiel im Fall von Regis in meinem Nav ich würde tun

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

. Ich hoffe, das wird anderen helfen.