메시지를 동적으로 렌더링하는 방법

Question

번역 목적으로 react-intl 패키지를 사용하고 있습니다. 사용자가 스페인어와 영어 중에서 선택할 수있는 기능이 있습니다. 기본적으로 스페인어가 사용됩니다. 사용자가 영어를 선택한 경우 모든 텍스트를 영어로 번역하고 스페인어로 누른 다음 스페인어로 번역해야합니다. 로케일과 메시지를 저장하는 액션과 감속기를 만들었습니다. 구성 요소는 로켈 및 메시지를 소품으로 허용합니다. 로케일과 메시지도 동적으로 전달할 수 있습니다. 동적으로, 나는 사용자가 영어를 선택할 때 로케일을 'en'및 그에 따른 메시지로 가져옵니다.

하지만 메시지/텍스트를 동적으로 렌더링 할 수 없습니다. 다음 오류가 발생합니다

메시지 형식을 사용할 수 없습니다 : "Nav__registration_text", 메시지 ID는 fallback입니다.

여기에 내 코드

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> 

. 다른 사람들에게 도움이되기를 바랍니다.