分支组件
在翻译中使用分支组件实现条件内容的指南
分支组件可在<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>内的条件逻辑 - 提供后备内容，当条件与预期不匹配时使用
- 支持对所有可能的内容变体进行翻译
- 自动遵循 locale 规则进行复数处理
// ❌ 这样会出错 - 在 <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>与 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 个项目</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 文档中了解更多关于复数规则的内容。
后续步骤
这份指南怎么样？