Обзор

Хук useMessages переводит закодированные строки из msg на этапе сборки.

const m = useMessages();

<p>{  m(encodedString)  }</p>;

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

Параметры

Отсутствуют

Возвращает

Функцию обратного вызова m, которая выполняет перевод переданного закодированного содержимого из msg.

(encodedContent: string, options?: Record<string, any>) => string

Поведение

Production

В процессе CD любой контент внутри функции msg будет переведён до развёртывания вашего приложения. Это обеспечивает быструю загрузку для всех локалей, но позволяет переводить только тот контент, который известен на этапе сборки.

После генерации переводы либо (1) сохраняются в CDN, либо (2) включаются в артефакты сборки вашего приложения — в зависимости от вашей конфигурации. Затем переведённый контент отдается вашим пользователям. Если перевод не найден, используется исходный текст.

Обязательно следуйте руководству по развёртыванию.

Разработка

В ходе разработки функция m переводит контент по запросу. Это полезно для прототипирования внешнего вида приложения на разных языках. Не забудьте добавить Dev API key в переменные окружения, чтобы включить эту возможность.

В режиме разработки при переводе по запросу может наблюдаться задержка. В продакшен-сборках этого не будет, если только контент не переводится по запросу явно, то есть с использованием tx или <Tx>.

Пример

Базовое использование

Вы можете использовать useMessages для перевода кодированных строк из msg.

import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('Привет, Алиса!');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

Примечание: «Alice» будет переведено на выбранный пользователем язык.

Работа с переменными

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

import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('Привет, {name}!', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

Примечание: будет показано "Hello, Bob!" — переменная переопределяется во время рендеринга.

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

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

import { msg, useMessages } from 'gt-react';

const encodedMessage = msg('В корзине {count, plural, =0 {нет товаров} =1 {один товар} few {{count} товара} many {{count} товаров} other {{count} товара}}', { count: 10 });

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedMessage)}
    </p>
  );
}

Примечания

• Функция useMessages — это хук, который переводит закодированные строки из msg.
• Перевод строк с помощью useMessages выполняется не во время выполнения, а на этапе сборки (кроме режима разработки).

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

• См. getMessages для асинхронного получения переводов строк из закодированных строк на этапе сборки.
• См. msg для кодирования строк под перевод.
• Для переводов во время выполнения см. tx и <Tx>.