javascript - 如何动态呈现消息

Question

我正在使用react-intl包进行翻译。有一个功能可供用户在西类牙语和英语之间进行选择。默认情况下，使用西类牙语。如果用户选择英语，则所有文本都应翻译为英语，如果选择西类牙语，则应翻译为西类牙语。我创建了一个操作和 reducer 来存储区域设置及其消息。该组件接受语言环境和消息作为 Prop 。我也可以动态传递区域设置和消息。动态地，我的意思是当用户选择英语时，将语言环境设置为“en”及其相应的消息。

但我无法动态呈现消息/文本。我收到以下错误

Cannot format message: "Nav__registration_text", using message id as 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: 'key of that message/text' }) }

例如，如果在我的导航中注册，我会这样做

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

。 我希望这会帮助其他人。