React-Intl: доступ к formatMessage во вложенном компоненте

Вопрос прост, и я не могу поверить, что не могу найти решение (без контекста) для такой простой ситуации.

Я использую 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.

Не знаю, в чем моя ошибка.


person RetroMime    schedule 07.02.2018    source источник


Ответы (1)


Wiki модуля объясняет метод, но не то, как его использовать.

Решение простое. Вам нужно изменить синтаксис экспорта вашего компонента React, и тогда this.props.intl будет волшебным образом доступен в компоненте:

export default injectIntl(MyComponent); //WORKS!!!

К сожалению:

export default class injectIntl(MyComponent) extends React.Component //DOESN'T WORK
person RetroMime    schedule 12.02.2018