变量组件
如何在翻译中使用变量组件处理动态内容
变量组件可让你在 <T> 组件中安全地插入动态内容。它们在本地完成格式化和本地化处理，不会将数据发送到翻译 API，特别适用于用户名、账户号码、财务数据等敏感信息。
可用组件
<Var>: 未经格式化的原始动态内容<Num>: 按 locale 规则格式化的数字<Currency>: 带符号并已格式化的货币金额<DateTime>: 符合 locale 约定的日期与时间
快速上手
Variable 组件可在 <T> 中使用，用于处理动态内容：
import { T, Var, Num, Currency, DateTime } from 'gt-react';
function UserProfile({ user }) {
return (
<T>
<p>欢迎回来，<Var>{user.name}</Var>！</p>
<p>您有 <Num>{user.itemCount}</Num> 个项目。</p>
<p>余额：<Currency currency="USD">{user.balance}</Currency></p>
<p>上次登录：<DateTime>{user.lastLogin}</DateTime></p>
</T>
);
}Variable 组件的工作原理
Variable 组件通过以下方式解决动态内容问题：
- 封装动态值，以便它们可以在
<T>中使用 - 本地处理格式化，利用浏览器内置的 i18n API
- 确保数据私密——内容绝不会发送到翻译 API
- 根据用户当前的 locale 进行本地化
// ❌ 这样会出错 - <T> 中包含动态内容
<T><p>你好 {username}</p></T>
// ✅ 这样可以正常工作 - 动态内容已包装
<T><p>你好 <Var>{username}</Var></p></T>组件指南
<Var> - 原始动态内容
将 <Var> 用于任何无需特殊格式的动态内容：
// 用户信息
<T>
<p>你好，<Var>{user.name}</Var>！</p>
<p>您的账户 ID 是 <Var>{user.accountId}</Var></p>
</T>
// 条件渲染
<T>
控制面板：<Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T><Num> - 格式化数字
当需要按 locale 的格式规则显示数字时，请使用 <Num>：
// 基本数字格式化
<T>
您的购物车中有 <Num>{itemCount}</Num> 件商品。
</T>
// 独立使用（等同于 number.toLocaleString()）
<Badge><Num>{totalItems}</Num></Badge>
// 自定义格式化选项
<T>
距离：<Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> 公里
</T><Currency> - 金额格式
使用<Currency>来格式化货币金额：
// 基本货币格式化（默认为 "USD"）
<T>
您的总计是 <Currency>{total}</Currency>。
</T>
// 不同货币
<T>
价格：<Currency currency="EUR">{price}</Currency>
</T>
// 自定义格式化
<Currency
currency="USD"
options={{ minimumFractionDigits: 0 }}
>
{roundedAmount}
</Currency><DateTime> - 日期与时间
使用 <DateTime> 来处理日期与时间：
// 基本日期格式化
<T>
订单下单时间：<DateTime>{orderDate}</DateTime>
</T>
// 时间格式化
<T>
最后更新：<DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>
// 自定义日期格式
<DateTime options={{
year: 'numeric',
month: 'long',
day: 'numeric'
}}>
{eventDate}
</DateTime>隐私与安全
数据仅在本地处理
Variable 组件使用浏览器的 Intl APIs 在本地完成所有格式化。不会将任何动态内容发送到翻译 API，非常适用于：
- 用户名和个人信息
- 账户号码与 ID
- 财务数据与账户余额
- 私密时间戳和日期
// 安全 - 敏感数据保留在本地
<T>
账户余额：<Currency currency="USD">{balance}</Currency>
上次登录：<DateTime>{lastLoginTime}</DateTime>
</T>重要例外
在变量组件中嵌套 <T> 组件时，请务必小心：
// ⚠️ 内部的 <T> 内容将会被发送进行翻译
<T>
<Var>
<T>你好，世界！</T> {/* 这部分会被翻译 */}
{privateData} {/* 这部分保持本地 */}
</Var>
</T>独立使用
Variable 组件也可以在 <T> 之外单独用于纯格式化：
// 这些组件的工作方式类似于各自的 .toLocale*() 方法
<span><Num>{count}</Num></span> // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span> // 价格格式化
<span><DateTime>{date}</DateTime></span> // date.toLocaleDateString()常见问题
忽略本地化选项
对于<Currency>，请务必传入 currency prop 来指定货币类型。这样可以确保在显示 value 时使用正确的货币符号和格式：
// ❌ 默认为 USD - 可能不符合用户预期
<T>
该商品价格为 <Currency>{price}</Currency>
</T>
// ✅ 明确指定货币类型
<T>
该商品价格为 <Currency currency="EUR">{price}</Currency>
</T>其他组件也提供可选的 props，用于自定义格式：
// 基本格式化
<T>
库存 <Num>{count}</Num> 件商品
</T>
// 自定义格式化
<T>
完成率 <Num options={{ style: 'percent' }}>{percentage}</Num>
</T>
// 日期格式化
<T>
最后更新：<DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>下一步
这份指南怎么样？