Назад

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, а подстановка переменных выполняется автоматически.

До и после

// Before — ICU placeholders + options object
t("Hello, {name}! You have {count} items.", { name, count })

// After — tagged template literal
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 в каждом файле, можно зарегистрировать его глобально:

// In your app's entry point (e.g., 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`,
};

Ссылки