Вопрос прост, и я не могу поверить, что не могу найти решение (без контекста) для такой простой ситуации.
Я использую react-intl. У меня есть App.jsx с дочерним компонентом Index.jsx с SideBar.jsx с CreateNewSomething.jsx.
Во всех компонентах команда
<FormattedMessage
id="new_object.fill_title"
defaultMessage='Please fill the "title" parameter'
/>
отлично работает благодаря <IntlProvider>
, предоставленному App.jsx
К сожалению, я не могу ввести FormattedMessage
в качестве значения состояния компонента.
Пример:
<Input
s={6}
label={label_dash_title}
style={style_items_form}
onChange={this.onDashTitleChange}
onKeyPress={this.newDashHandleEnterKey}
error= { this.state.title_error }
/>
Когда поле ввода не заполнено (обязательно), я хочу напечатать сообщение об ошибке. К сожалению, я не могу написать:
const error_message = <FormattedMessage
id="new_dash.fill_title"
defaultMessage='Please fill the "title" parameter'
/>
this.setState({"title_error" : error_message});
потому что я получаю [object Object]
, а внутри моего переведенного сообщения нет свойства.
Обыскивая везде, я обнаружил, что должен использовать this.props.intl.formatMessage({id: 'new_dash.fill_title'});
но this.props.intl не определен.
Я попытался включить в App.jax:
import {addLocaleData, IntlProvider, injectIntl, intlShape} from 'react-intl';
но это не имеет значения.
Я пытался передать intl каждому дочернему компоненту в качестве реквизита, но intl также не определен в App.jsx.
Не знаю, в чем моя ошибка.