返回

gt-react@10.13.0

Ernest McCarter avatarErnest McCarter
gt-reactmacrotagged-templatedeveloper-experiencei18n

概述

作为我们持续尝试摆脱 React context的一部分，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 context

与 gt-react@10.12.0 中引入的 t() 函数一样，带标签的模板字面量形式也不依赖 React context。它可在浏览器端代码中的任何位置使用：

  • 事件处理函数: onClick={() => alert(t`Saved!`)}
  • 工具函数: function formatError(code) { return t`Error: ${code}` }
  • 常量和配置: const LABELS = { save: t`Save`, cancel: t`Cancel` }
  • 完全脱离 React 组件使用

全局注册

如果你不想在每个文件中导入 t，可以将其注册为全局变量：

// 在你的 app 的入口点（例如，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`,
};

链接