Назад

gt-react@10.13.0

Ernest McCarter avatarErnest McCarter
gt-reactmacrotagged-templatedeveloper-experiencei18n

Обзор

В рамках наших продолжающихся экспериментов по отказу от контекста React gt-react теперь поддерживает использование t в виде тегированного шаблонного литерала:

import { t } from "gt-react/browser";

const greeting = t`Hello, ${name}!`;

Это альтернативный синтаксис для существующего вызова функции t(). Вместо заполнителей в стиле ICU и передачи объекта параметров здесь используется обычный шаблонный литерал JavaScript, а интерполяция переменных выполняется автоматически.

До и после

// До — ICU-заполнители + объект параметров
t("Hello, {name}! You have {count} items.", { name, count })

// После — тегированный шаблонный литерал
t`Hello, ${name}! You have ${count} items.`

Форма с тегированным шаблоном избавляет от необходимости задавать имена заполнителям или дублировать переменные. Вы записываете строку так же, как записали бы любой шаблонный литерал JavaScript.

Контекст React не нужен

Как и функция t(), представленная в gt-react@10.12.0, вариант с тегированным шаблонным литералом не зависит от контекста React. Он работает где угодно в браузерном коде:

  • Обработчики событий: onClick={() => alert(t`Saved!`)}
  • Вспомогательные функции: function formatError(code) { return t`Error: ${code}` }
  • Константы и конфигурация: const LABELS = { save: t`Save`, cancel: t`Cancel` }
  • Даже вне React-компонентов

Глобальная регистрация

Если вы не хотите импортировать t в каждом файле, можно зарегистрировать его глобально:

// В точке входа вашего приложения (например, layout.tsx)
import "gt-react/macros";

Это задаёт globalThis.t, благодаря чему тегированный шаблонный литерал становится доступен везде без явного импорта.

Пример

import { t } from "gt-react/browser";

export function Greeting({ name }) {
  return <p>{t`Hello, ${name}!`}</p>;
}

export function SaveButton() {
  return (
    <button onClick={() => alert(t`Changes saved!`)}>
      {t`Save`}
    </button>
  );
}

Или при глобальной регистрации:

// Импорт не нужен — t доступен через globalThis
const LABELS = {
  save: t`Save`,
  cancel: t`Cancel`,
  delete: t`Delete`,
};

Ссылки