# react-native: 分支组件
URL: https://generaltranslation.com/zh/docs/react-native/guides/branches.mdx
---
title: 分支组件
description: 如何使用分支组件在翻译中处理条件内容
---

{/* 自动生成：请勿直接编辑。请改为编辑 content/docs-templates/ 中的模板。 */}

分支组件可在 [`<T>`](/docs/react-native/api/components/t) 组件内实现条件渲染。它们可处理 if/else 语句和复数规则等动态逻辑，同时确保所有内容变体都能得到正确翻译。


## 可用组件

* [`<Branch>`](/docs/react-native/api/components/branch)：根据值或状态有条件地渲染内容
* [`<Plural>`](/docs/react-native/api/components/plural)：根据区域设置规则自动处理复数处理

## 快速入门

分支组件可在 [`<T>`](/docs/react-native/api/components/t) 中使用，用于处理条件逻辑：

```jsx
import { T, Branch, Plural, Num, Var } from 'gt-react-native';

function NotificationPanel({ user, messageCount }) {
  return (
    <T>
      <Branch 
        branch={user.status}
        online={<p><Var>{user.name}</Var> is currently online</p>}
        away={<p><Var>{user.name}</Var> is away</p>}
      >
        <p><Var>{user.name}</Var> status unknown</p>
      </Branch>
      
      <Plural
        n={messageCount}
        one={<p>You have <Num>{messageCount}</Num> message</p>}
        other={<p>You have <Num>{messageCount}</Num> messages</p>}
      />
    </T>
  );
}
```


## 分支组件的工作方式

分支组件通过以下方式解决翻译中的条件渲染问题：

1. **替换三元运算符**以及 [`<T>`](/docs/react-native/api/components/t) 内的条件逻辑
2. **提供回退内容**，以便在条件不符合预期值时使用
3. **让所有可能的内容变体都能被翻译**
4. **自动遵循区域设置规则**进行复数处理

```jsx
// ❌ 这样会出错 - <T> 中包含条件逻辑
<T><p>{isActive ? 'User is active' : 'User is inactive'}</p></T>

// ✅ 这样可以正常工作 - 使用分支组件处理条件逻辑
<T>
  <Branch 
    branch={isActive} 
    true={<p>User is active</p>}
    false={<p>User is inactive</p>}
  />
</T>
```

## 组件指南

### Branch - 条件内容

对于基于值或状态的条件渲染，请使用 [`<Branch>`](/docs/react-native/api/components/branch)：

```jsx
// 用户状态显示
<T>
  <Branch 
    branch={user.role}
    admin={<p>Administrator Dashboard</p>}
    user={<p>User Dashboard</p>}
    guest={<p>Guest Access</p>}
  >
    <p>Access level unknown</p>
  </Branch>
</T>

// 布尔条件
<T>
  <Branch 
    branch={isLoggedIn}
    true={<p>Welcome back!</p>}
    false={<p>Please log in</p>}
  />
</T>

// 订阅等级
<T>
  <Branch
    branch={subscription.tier}
    free={<p>Upgrade to unlock premium features</p>}
    premium={<p>Enjoy your premium experience</p>}
    enterprise={<p>Contact support for enterprise solutions</p>}
  >
    <p>Subscription status unavailable</p>
  </Branch>
</T>
```


### 复数 - 智能复数处理

对于会随数量变化的内容，请使用 [`<Plural>`](/docs/react-native/api/components/plural)：

```jsx
// 基本复数处理
<T>
  <Plural
    n={itemCount}
    one={<p><Num>{itemCount}</Num> item in cart</p>}
    other={<p><Num>{itemCount}</Num> items in cart</p>}
  />
</T>

// 零值处理
<T>
  <Plural
    n={notifications}
    zero={<p>No new notifications</p>}
    one={<p><Num>{notifications}</Num> notification</p>}
    other={<p><Num>{notifications}</Num> notifications</p>}
  />
</T>

// 复杂复数处理（遵循 Unicode CLDR 规则）
<T>
  <Plural
    n={days}
    zero={<p>Due today</p>}
    one={<p>Due in <Num>{days}</Num> day</p>}
    few={<p>Due in <Num>{days}</Num> days</p>}
    many={<p>Due in <Num>{days}</Num> days</p>}
    other={<p>Due in <Num>{days}</Num> days</p>}
  />
</T>
```

### 与变量组件配合使用

分支组件与变量组件可以无缝配合使用：

```jsx
<T>
  <Branch
    branch={order.status}
    pending={
      <p>
        Order <Var>{order.id}</Var> is pending. 
        Total: <Currency currency="USD">{order.total}</Currency>
      </p>
    }
    shipped={
      <p>
        Order <Var>{order.id}</Var> shipped on <DateTime>{order.shippedDate}</DateTime>
      </p>
    }
    delivered={
      <p>Order <Var>{order.id}</Var> was delivered successfully</p>
    }
  >
    <p>Order status unknown</p>
  </Branch>
</T>
```


## 何时使用分支组件

### 替换三元运算符

将条件逻辑改写为可在 [`<T>`](/docs/react-native/api/components/t) 中使用的形式：

```jsx
// ❌ 不能在 <T> 中使用三元运算符
<T>{isActive ? <p>Active user</p> : <p>Inactive user</p>}</T>

// ✅ 改用 Branch 代替
<T>
  <Branch 
    branch={isActive}
    true={<p>Active user</p>}
    false={<p>Inactive user</p>}
  />
</T>
```


### 处理多个条件判断

替代 switch 语句或多个 if/else 条件：

```jsx
// ❌ 复杂的条件逻辑
<T>
  {status === 'loading' ? <p>Loading...</p> : 
   status === 'error' ? <p>Error occurred</p> : 
   status === 'success' ? <p>Success!</p> : 
   <p>Unknown status</p>}
</T>

// ✅ 简洁的分支逻辑
<T>
  <Branch
    branch={status}
    loading={<p>Loading...</p>}
    error={<p>Error occurred</p>}
    success={<p>Success!</p>}
  >
    <p>Unknown status</p>
  </Branch>
</T>
```


### 复数规则

替换手动处理复数的写法：

```jsx
// ❌ 手动复数处理
<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>`](/docs/react-native/api/components/t) 之外使用，仅用于不涉及翻译的纯逻辑：

```jsx
// 纯条件渲染
<Branch
  branch={theme}
  dark={<DarkModeIcon />}
  light={<LightModeIcon />}
>
  <DefaultIcon />
</Branch>

// 纯复数处理
<Plural
  n={count}
  one={<SingleItemComponent />}
  other={<MultipleItemsComponent />}
/>
```


## 常见问题

### 缺少的分支键

始终为未匹配的值提供后备内容：

```jsx
// ❌ 未预期值没有回退内容
<Branch
  branch={userRole}
  admin={<AdminPanel />}
  user={<UserPanel />}
  // 如果 userRole 是 "moderator" 怎么办？
/>

// ✅ 始终提供回退内容
<Branch
  branch={userRole}
  admin={<AdminPanel />}
  user={<UserPanel />}
>
  <DefaultPanel /> {/* 其他所有值的回退内容 */}
</Branch>
```


### 复数形式不完整

为默认区域设置提供所需的复数形式：

```jsx
// ❌ 缺少 "other" 形式
<Plural
  n={count}
  one={<p>1 item</p>}
  // 0、2、3 等情况怎么处理？
/>

// ✅ 包含所有必要的形式
<Plural
  n={count}
  zero={<p>No items</p>}
  one={<p>1 item</p>}
  other={<p>{count} items</p>}
/>
```


### 复杂嵌套逻辑

虽然这样也可行，但我们建议保持分支逻辑简洁，避免嵌套过深：

```jsx
// ❌ 复杂的嵌套分支
<Branch branch={status}>
  <Branch branch={subStatus}>
    {/* 难以阅读和维护 */}
  </Branch>
</Branch>

// ✅ 扁平化逻辑或使用多个组件
<Branch
  branch={`${status}-${subStatus}`}
  active-online={<ActiveOnline />}
  active-offline={<ActiveOffline />}
  inactive-online={<InactiveOnline />}
>
  <DefaultState />
</Branch>
```

<Callout>
  请参阅 [Unicode CLDR 文档](https://cldr.unicode.org/index/cldr-spec/plural-rules)，进一步了解复数规则。
</Callout>


## 后续步骤

* [字符串翻译指南](/docs/react-native/guides/strings) - 在不使用 JSX 的情况下翻译纯文本
* [动态内容指南](/docs/key-concepts/dynamic-content) - 处理 runtime 翻译
* API 参考：
  * [`<Branch>` 组件](/docs/react-native/api/components/branch)