Обзор

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

Справочник

Параметры

Описание

Примеры

Контекст

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

import { useGT } from 'gt-react';

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

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

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

import { useGT } from 'gt-react';

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

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

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

import { useGT } from 'gt-react';

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

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

Заметки

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

Следующие шаги

• См. useGT для получения дополнительных сведений о переводах встроенных строк.
• См. формат сообщений ICU для получения дополнительных сведений о вариантах форматирования.