返回

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 上下文

和 gt-react@10.12.0 中介绍的 t() 函数一样，标签模板形式也不依赖 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`,
};

相关链接