分支组件
如何在翻译中使用分支组件实现条件内容
分支组件可在 <T> 组件内实现条件内容渲染。它们能够处理 if/else 语句与复数规则等动态逻辑，同时确保所有内容变体都能被正确翻译。
可用组件
快速开始
分支组件可在<T>内使用，用于处理条件逻辑：
import { T, Branch, Plural, Num, Var } from 'gt-react';
function NotificationPanel({ user, messageCount }) {
return (
<T>
<Branch
branch={user.status}
online={<p><Var>{user.name}</Var> 当前在线</p>}
away={<p><Var>{user.name}</Var> 暂时离开</p>}
>
<p><Var>{user.name}</Var> 状态未知</p>
</Branch>
<Plural
n={messageCount}
one={<p>你有 <Num>{messageCount}</Num> 条消息</p>}
other={<p>你有 <Num>{messageCount}</Num> 条消息</p>}
/>
</T>
);
}分支组件的工作原理
分支组件通过以下方式处理翻译中的条件渲染：
- 替代三元运算符 和在
<T>内的条件逻辑 - 在条件与预期不符时提供 fallback 内容
- 支持对所有可能的内容变体进行翻译
- 自动依据 locale 规则 处理 pluralization
// ❌ 这种写法会出错——在 <T> 中使用条件逻辑
<T><p>{isActive ? '用户为活跃状态' : '用户为非活跃状态'}</p></T>
// ✅ 这种写法可行——使用分支实现条件逻辑
<T>
<Branch
branch={isActive}
true={<p>用户为活跃状态</p>}
false={<p>用户为非活跃状态</p>}
/>
</T>组件指南
<Branch> - 条件内容
使用 <Branch> 来根据值或状态进行条件渲染：
// 用户状态显示
<T>
<Branch
branch={user.role}
admin={<p>管理员仪表板</p>}
user={<p>用户仪表板</p>}
guest={<p>访客访问</p>}
>
<p>访问级别未知</p>
</Branch>
</T>
// 布尔条件
<T>
<Branch
branch={isLoggedIn}
true={<p>欢迎回来！</p>}
false={<p>请登录</p>}
/>
</T>
// 订阅层级
<T>
<Branch
branch={subscription.tier}
free={<p>升级以解锁高级功能</p>}
premium={<p>尽享高级体验</p>}
enterprise={<p>联系支持以获取企业级解决方案</p>}
>
<p>订阅状态不可用</p>
</Branch>
</T><Plural> - 智能复数处理
对于会随数量变化的内容，请使用<Plural>：
// 基本复数处理
<T>
<Plural
n={itemCount}
one={<p>购物车中有 <Num>{itemCount}</Num> 件商品</p>}
other={<p>购物车中有 <Num>{itemCount}</Num> 件商品</p>}
/>
</T>
// 零值处理
<T>
<Plural
n={notifications}
zero={<p>暂无新通知</p>}
one={<p><Num>{notifications}</Num> 条通知</p>}
other={<p><Num>{notifications}</Num> 条通知</p>}
/>
</T>
// 复杂复数处理（遵循 Unicode CLDR 规则）
<T>
<Plural
n={days}
zero={<p>今天到期</p>}
one={<p><Num>{days}</Num> 天后到期</p>}
few={<p><Num>{days}</Num> 天后到期</p>}
many={<p><Num>{days}</Num> 天后到期</p>}
other={<p><Num>{days}</Num> 天后到期</p>}
/>
</T>与变量组件结合使用
分支与变量组件可无缝协作：
<T>
<Branch
branch={order.status}
pending={
<p>
订单 <Var>{order.id}</Var> 处理中。
总计：<Currency currency="USD">{order.total}</Currency>
</p>
}
shipped={
<p>
订单 <Var>{order.id}</Var> 已于 <DateTime>{order.shippedDate}</DateTime> 发货
</p>
}
delivered={
<p>订单 <Var>{order.id}</Var> 已成功送达</p>
}
>
<p>订单状态未知</p>
</Branch>
</T>何时使用分支型组件
替换三元运算符
将条件逻辑改写为可在 <T> 中使用的形式：
// ❌ 不能在 <T> 中使用三元运算符
<T>{isActive ? <p>活跃用户</p> : <p>非活跃用户</p>}</T>
// ✅ 请改用 Branch
<T>
<Branch
branch={isActive}
true={<p>活跃用户</p>}
false={<p>非活跃用户</p>}
/>
</T>处理多个条件
用它替代 switch 语句或多重 if/else 分支：
// ❌ 复杂的条件逻辑
<T>
{status === 'loading' ? <p>加载中...</p> :
status === 'error' ? <p>发生错误</p> :
status === 'success' ? <p>成功！</p> :
<p>未知状态</p>}
</T>
// ✅ 清晰的分支逻辑
<T>
<Branch
branch={status}
loading={<p>加载中...</p>}
error={<p>发生错误</p>}
success={<p>成功！</p>}
>
<p>未知状态</p>
</Branch>
</T>复数处理规则
用以下方式替代手动处理复数：
// ❌ 手动复数形式处理
<T>{count === 1 ? <p>1 item</p> : <p>{count} items</p>}</T>
// ✅ 自动复数形式处理
<T>
<Plural
n={count}
one={<p><Num>{count}</Num> item</p>}
other={<p><Num>{count}</Num> items</p>}
/>
</T>独立使用
分支组件可在 <T> 之外独立使用，用于仅处理逻辑、不涉及翻译的场景：
// 纯粹的条件渲染
<Branch
branch={theme}
dark={<DarkModeIcon />}
light={<LightModeIcon />}
>
<DefaultIcon />
</Branch>
// 纯粹的复数化处理
<Plural
n={count}
one={<SingleItemComponent />}
other={<MultipleItemsComponent />}
/>常见问题
缺失的分支键
务必为未匹配的值提供回退内容：
// ❌ 未预期的值没有回退
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
// 如果 userRole 是 "moderator" 怎么办？
/>
// ✅ 始终提供回退
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
>
<DefaultPanel /> {/* 其他任意值的回退处理 */}
</Branch>复数形式不完整
请为默认 locale 提供所需的复数形式：
// ❌ 缺少 "other" 形式
<Plural
n={count}
one={<p>1 item</p>}
// 那 0、2、3 等情况呢?
/>
// ✅ 包含必需的形式
<Plural
n={count}
zero={<p>无项目</p>}
one={<p>1 个项目</p>}
other={<p>{count} 个项目</p>}
/>复杂嵌套逻辑
虽然这种做法可行，但我们建议尽量简化分支逻辑，避免深度嵌套：
// ❌ 复杂的嵌套分支
<Branch branch={status}>
<Branch branch={subStatus}>
{/* 不易阅读和维护 */}
</Branch>
</Branch>
// ✅ 将逻辑扁平化或拆分为多个组件
<Branch
branch={`${status}-${subStatus}`}
active-online={<ActiveOnline />}
active-offline={<ActiveOffline />}
inactive-online={<InactiveOnline />}
>
<DefaultState />
</Branch>在 Unicode CLDR 文档中进一步了解复数规则。
下一步
本指南如何?