我正在使用react-intl包进行翻译。用户可以选择西班牙语和英语之间的功能。默认情况下,使用西班牙语。如果用户选择英语,则所有文本都应翻译为英语,如果是西班牙语则翻译成西班牙语。我创建了一个动作以及还原器来存储语言环境及其消息。组件接受语言环境和消息作为prop。我也可以动态传递语言环境和消息。通过动态,我的意思是当用户选择英语时,将语言环境设置为“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 :(得分:0)
我找到了解决方案。一切都好。无论我想要翻译的消息,我都会做
{intl.formatMessage({id:&#39;该消息/文字的关键&#39;})}
例如,如果在我的导航中注册,我会做
<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>
。 我希望这会有助于其他人。