The <T> 组件
如何使用 <T> 组件对 JSX 内容进行国际化
<T> 组件 是在 React 应用中对 JSX 内容进行国际化的主要工具。它会包裹你的 JSX 元素，并根据用户的 locale 自动完成翻译。
快速开始
将任意静态 JSX 内容用 <T> 包裹即可完成转换：
import { T } from 'gt-react';
// 之前
function Greeting() {
return <p>你好，世界！</p>;
}
// 之后
function Greeting() {
return <T><p>你好，世界！</p></T>;
}对于 <T> 中的动态内容，请使用 Variable 组件和 Branching 组件。
基本用法
<T> 组件 可将任意 JSX 内容作为 children：
// 简单文本
<T>欢迎使用我们的应用</T>
// HTML 元素
<T><h1>页面标题</h1></T>
// 复杂嵌套 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>复杂组件
// Navigation menu
<T>
<nav className="navbar">
<a href="/about">关于我们</a>
<a href="/contact">联系我们</a>
</nav>
</T>
// Alert message
<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> 只会翻译其直接子节点，不会翻译嵌套在其他组件内的内容：
// ❌ 错误——组件内的内容不会被翻译
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>你好，世界</T> {/* 请勿这样做 */}
</T>动态内容错误
CLI 会对 <T> 中的动态内容报错。请使用 Variable 组件包裹动态值：
// ❌ 错误——动态内容会出问题
<T><p>你好，{username}</p></T>
// ✅ 正确——请使用 Variable 组件
<T><p>你好，<Var>{username}</Var></p></T>后续步骤
本指南如何?