Компонент <FormattedMessage /> возвращает React-элементы, а не обычные текстовые строки. Из-за этого он несовместим с атрибутами вроде placeholder, alt или title, которым нужны строковые значения.
Вместо компонентного подхода используй низкоуровневую функцию formatMessage() из объекта intl. Она возвращает обычные текстовые строки, подходящие для HTML-атрибутов.
Сначала внедри объект intl в свой компонент через HOC injectIntl():
import React from 'react'
import { injectIntl, intlShape } from 'react-intl'
const MyComponent = ({ intl }) => {
const placeholder = intl.formatMessage({ id: 'messageId' })
return <input placeholder={placeholder} />
}
MyComponent.propTypes = {
intl: intlShape.isRequired
}
export default injectIntl(MyComponent)
injectIntl() оборачивает твой компонент и передаёт проп intlformatMessage() принимает ID сообщения и возвращает обычную текстовую строкуintlShape.isRequired в propTypes для типобезопасностиЭтот паттерн необходим для:
placeholder у инпутовalt у изображенийtitle у кнопокКомпонент <FormattedMessage /> можно напрямую передать в атрибут placeholder элемента input, потому что он умно преобразует React-элементы в строки.
Новый — ещё не проверен сообществом
Вы