React-intl cosntдает [объект объекта] в качестве результата

Question

Я использую «реагировать-intl»: «^ 2.4.0» и «реагировать»: «^ 16.2.0».

Я пытаюсь присвоить вывод тега FormattedMessage константеи поместите его в заполнитель входного тега.

Кодовое изображение

Ожидаемое поле ввода ввода с текстом на соответствующем языке, но внутри [объект объекта] внутритекстовое поле.

Answer 1

<FormattedMessage /> - это компонент, который нельзя поместить в placeholder, который ожидает необработанную строку.

import {injectIntl} from 'react-intl'; 

class TestComponent extends React.Component{
  render(){
    const { intl } = this.props;
    return (
        <input placeholder={intl.formatMessage({ id: "loginPage.username", defaultMessage: 'username'})}/>
    )
  }
}

export default injectIntl(TestComponent);