<T> 组件
如何使用 <T> 组件对 JSX 内容进行国际化
<T> 组件 是在 Next.js 应用中对 JSX 内容进行国际化的主要工具。它会包裹你的 JSX 元素，并根据用户的 locale 自动完成翻译。
快速开始
将任意静态 JSX 内容用<T>包裹即可实现转换：
import { T } from 'gt-next';
// 之前
function Greeting() {
return <p>你好，世界！</p>;
}
// 之后
function Greeting() {
return <T><p>你好，世界！</p></T>;
}对于 <T> 中的动态内容，请使用 变量组件（Variable Components） 和 分支组件（Branching Components）。
基本用法
<T> 组件 可将任意 JSX 内容作为 children 传入：
// Simple text
<T>欢迎使用我们的应用</T>
// HTML elements
<T><h1>页面标题</h1></T>
// Complex nested JSX
<T>
<div className="alert">
<span>重要：</span>请仔细阅读。
</div>
</T>配置选项
添加上下文
为含义不明确的术语提供翻译语境：
<T context="notification popup, not bread">
点击通知以关闭
</T>设置翻译 ID
使用显式 ID，确保译文一致：
<T id="welcome-message">
欢迎回来,用户!
</T>何时使用 <T>
<T> 仅用于静态内容：
// ✅ 静态内容可用
<T><button>点击此处</button></T>
<T><h1>欢迎访问我们的网站</h1></T>
// ❌ 动态内容会出错
<T><p>您好，{username}</p></T>
<T><p>今天是 {new Date()}</p></T>
// ✅ 动态内容请使用 Variable 组件
<T>
<p>您好，<Var>{username}</Var></p>
</T>Variable 与 Branching 组件旨在在用于动态内容的 <T> 中配合使用。详见 Variable Components 和 Branching Components 指南。
示例
简单元素
// Basic text
<T>你好，世界！</T>
// Button with text
<T><Button>提交</Button></T>
// Heading with styling
<T><h1 className="text-2xl font-bold">欢迎</h1></T>复合组件
// 导航栏
<T>
<nav className="navbar">
<a href="/about">关于我们</a>
<a href="/contact">联系我们</a>
</nav>
</T>
// 警告消息
<T>
<div className="alert alert-warning">
<AlertIcon className="w-5 h-5" />
<span>您的会话将在5分钟后过期</span>
</div>
</T>使用变量
// 将静态文本与动态值结合
<T>
<p>欢迎回来,<Var>{user.name}</Var>!</p>
</T>
// 包含混合内容的表单
<T>
<label>
邮箱:<input type="email" placeholder="输入您的邮箱" />
</label>
</T>生产环境配置
构建流程
将翻译纳入你的构建管道：
{
"scripts": {
"build": "npx gtx-cli translate && <...你的构建命令...>"
}
}开发环境与生产环境的行为差异
- 开发环境：使用 Dev API key 时，组件渲染时会按需执行翻译。你将在开发过程中看到实时翻译效果。
- 生产环境：所有翻译都会在构建阶段预先生成，应用上线后即可生效。
在你的环境中设置开发用的 API key，以便在开发期间启用实时翻译。你可以在 Dashboard 的 API Keys 中创建一个。
隐私注意事项
<T> 组件中的内容会发送到 GT API 进行翻译。对于敏感数据，请使用变量组件以将敏感信息保留在本地：
// 安全——敏感数据仅保留在本地
<T>
欢迎回来，<Var>{username}</Var>
</T>常见问题
组件边界
<T> 仅翻译其直接 children，不会翻译其他组件内部的内容：
// ❌ 错误 - 组件内的内容不会被翻译
function MyComponent() {
return <p>这段内容不会被翻译</p>;
}
<T>
<h1>这段内容会被翻译</h1>
<MyComponent /> {/* 内部内容不会被翻译 */}
</T>
// ✅ 正确 - 单独包裹每个组件
function MyComponent() {
return <T><p>这段内容会被翻译</p></T>;
}
<T><h1>这段内容会被翻译</h1></T>
<MyComponent />嵌套 <T> 组件
// ❌ 请勿嵌套 <T> 组件
<T>
<T>Hello world</T> {/* 切勿这样做 */}
</T>动态内容错误
CLI（命令行界面）会对 <T> 中的动态内容报错。请使用 Variable 组件包裹动态值：
// ❌ 错误——动态内容会失效
<T><p>你好，{username}</p></T>
// ✅ 正确——请使用 Variable 组件
<T><p>你好，<Var>{username}</Var></p></T>后续步骤
- Variable Components 指南 - 在 JSX 翻译中处理动态内容
- Branching Components 指南 - 为你的翻译添加条件逻辑
本指南如何?