Обзор

Тип RuntimeTranslationOptions используется для передачи переменных во встроенные переводы и задания их поведения при рендеринге. Вы также можете указать локаль, чтобы выбрать другой язык перевода. Эти параметры используются с функцией tx.

Справка

Параметры

Описание

Примеры

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

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

import { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    {tx(`Здравствуйте, {username}!`,{ username: 'Brian123' })}
  </div>;
};

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

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

import { tx } from 'gt-next/server';

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

Перевод переменных

Чтобы перевести переменную, включите её прямо в строку, передаваемую в tx.

import { tx } from 'gt-next/server';

const Component = ({ hairColor }: { hairColor: string }) => {
  return <div>{tx(
    `Привет, {username}! Цвет ваших волос — ${hairColor}`,
    { username: 'Brian123' }
  )}</div>;
};

Обратите внимание: переменная hairColor переводится, а username — нет.

Указание локали

Вы можете указать локаль, которую следует использовать для перевода.

import { tx } from 'gt-next/server';

const Component = () => {
  return <div>{tx('Привет, мир!', { $locale: 'fr' })}</div>;
};

Это всегда будет переводиться на французский.

Примечания

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

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

• См. tx для получения подробной информации о встроенных переводах строк.
• См. ICU message format для получения подробной информации о параметрах форматирования.