Подавать переводы с помощью react-intl

Проект, над которым я сейчас работаю, использует react-intl для обработки i18n, и я заметил, что компоненты получают отформатированное сообщение тремя разными способами:

  1. Использование компонента: <FormattedMessage id="MessageId" />
  2. Использование функции: intl.formatMessage({id: "MessageId"})
  3. Непосредственно используя объект сообщений: intl.messages["MessageId"]

Я думаю, что подход № 1 и № 2 — это то, что нужно, но я думаю, что № 3 очень ограничивает.

Каковы веские причины использовать № 3?


reactjs react-intl
person Francesco Meli    schedule 27.04.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Первый подход — это способ реагирования, и он рекомендуется, если вы используете ReactJS. Компонент FormattedMessage использует useIntl< /a> для внутреннего доступа к объекту intl (подход №2):

<FormattedMessage id="GREETING" />

Второй подход использует объект intl напрямую без абстракции React. Используйте это, если вы интегрируете международный API с другими неподдерживаемыми платформами.

intl.formatMessage({ id: "GREETING" })

Никогда не используйте третий подход. intl.messages — это обычный объект Javascript, который сопоставляет каждый MessageId с переведенным текстом. Вы даже не можете использовать форматирование сообщений ICU. Например:

{
  "GREETING": "Hello, {name}"
}

intl.formatMessage({ id: "GREETING" }, { name: "Near" }); // Hello, Near
intl.messages["GREETING"]; // Hello, {name}
person NearHuscarl    schedule 27.04.2021