React-intl cosnt <formattedmessage>给出[object object]作为结果

Question

我正在使用“ react-intl”：“ ^ 2.4.0”和“ react”：“ ^ 16.2.0”。

我正在尝试将FormattedMessage标签的输出分配给一个常量，并将其放在输入标签的占位符中。

Code Image

预期的“输出输入”字段，其中包含使用相应语言的文本，但该字段即将出现在文本框中。

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