Обзор

Тип InlineTranslationOptions используется для передачи переменных во встроенные переводы и задания их поведения при рендеринге. К переводу также можно добавить контекст и идентификатор. Он используется с useGT, getGT и msg для передачи переменных во встроенные строковые переводы.

Справочные материалы

Параметры

Описание

Примеры

Контекст

Чтобы добавить контекст к строке, используем проп $context.

import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>{t('Здравствуйте, мир!', { $context: 'формальное приветствие' })}</div>;
};

Передача переменных

Чтобы добавить переменную в строку, используйте синтаксис {variable-name}, где имя переменной заключено в фигурные скобки.

import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>{t('Привет, {username}! Как проходит твой день?', { username: 'Brian123' })}</div>;
};

Использование формата сообщений ICU

gt-next поддерживает формат сообщений ICU, позволяющий форматировать и переменные.

import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>
    { t(
      'Баланс вашего счёта: {dollars, number, ::currency/USD}!',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};

См. документацию по формату сообщений ICU для получения дополнительной информации о формате сообщений ICU.

Примечания

• InlineTranslationOptions используется для перевода строк «на месте».
• Объект variables подставляет значения в текст.
• Объект variablesOptions задаёт поведение переменных.

Дальнейшие шаги

• Подробнее см. в useGT и getGT о встроенных переводах строк.
• Подробнее о вариантах форматирования см. в разделе ICU message format.