变量组件
如何在翻译中使用变量组件处理动态内容
变量组件允许你在<T>组件中安全地插入动态内容。它们在本地完成格式化和本地化处理，而不会将数据发送到翻译 API，非常适合用于用户名、账号以及财务数据等敏感信息。
可用组件
<Var>: 未经格式化的原始动态内容<Num>: 按本地化格式显示的数字<Currency>: 带符号并按本地化格式显示的货币值<DateTime>: 符合本地化约定的日期和时间
快速开始
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>
);
}变量组件的工作原理
变量组件通过以下方式解决动态内容问题：
- 包装动态值（value），以便它们可以在
<T>中使用 - 在本地进行格式化，使用浏览器内置的 i18n API
- 保护数据隐私——内容绝不会发送到翻译 API
- 根据用户当前的 locale 提供本地化
// ❌ 这样会出错 - <T> 中包含动态内容
<T><p>Hello {username}</p></T>
// ✅ 这样可以正常工作 - 动态内容已用 <Var> 包装
<T><p>Hello <Var>{username}</Var></p></T>组件指南
<Var> - 原始动态内容
对不需要特殊格式的动态内容，请使用 <Var>：
// 用户信息
<T>
<p>你好,<Var>{user.name}</Var>!</p>
<p>您的账户 ID 为 <Var>{user.accountId}</Var></p>
</T>
// 条件渲染
<T>
Dashboard:<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>Hello, world!</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 属性以指定货币类型。这样可确保在显示 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>下一步
本指南如何?