分支组件
如何在翻译中使用分支组件实现条件化内容
分支组件可在<T>组件中进行条件内容渲染。它们可处理 if/else 语句和复数规则等动态逻辑，同时确保所有内容变体都能被正确翻译。
可用组件
快速开始
分支组件可在 <T> 内使用，用于处理条件逻辑：
import { T, Branch, Plural, Num, Var } from 'gt-next';
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>管理员 dashboard</p>}
user={<p>用户 dashboard</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>与 Variable 组件配合使用
分支组件与 Variable 组件可以无缝协同工作：
<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 个条目</p> : <p>{count} 个条目</p>}</T>
// ✅ 自动复数处理
<T>
<Plural
n={count}
one={<p><Num>{count}</Num> 个条目</p>}
other={<p><Num>{count}</Num> 个条目</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 文档以了解更多复数规则。
下一步
本指南如何?