# General Translation React SDKs (gt-react, gt-next, gt-react-native): 处理复数形式和分支
URL: https://generaltranslation.com/zh/docs/react/guides/handling-plurals-and-branches.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 如何使用 `<Plural>` 和 `<Branch>` 处理 React 中的复数形式和条件式翻译内容。

不同的区域设置有不同的复数形式：英语通常使用 `one` 和 `other`，而有些语言需要更多形式。

对于基于数量的文本，请使用 [`<Plural>`](/docs/react/reference/components/plural)；对于其他条件式内容，请使用 [`<Branch>`](/docs/react/reference/components/branch)。

## 选择复数形式或分支 [#choose]

* 当数字决定措辞时 (例如消息数量或搜索结果) ，请使用 [`<Plural>`](/docs/react/reference/components/plural)。
* 当状态、方案、布尔值或其他值决定内容时，请使用 [`<Branch>`](/docs/react/reference/components/branch)。
* 将任一组件放在 [`<T>`](/docs/react/reference/components/t) 内，以便翻译所有变体。
* 在每个变体中，使用[变量组件](/docs/react/guides/formatting-variables)包裹动态值，例如 [`<Num>`](/docs/react/reference/components/num) 或 [`<Var>`](/docs/react/reference/components/var)。

这两个组件在 React、Next.js、TanStack Start 和 React Native 中的用法相同，只有导入的 package 不同。

## 使用 `<Plural>` 处理复数 [#plural]

不要通过检查 `count === 1` 或添加 `s` 来处理复数形式；这只适用于英语语法。将计数作为 [`n`](/docs/react/reference/components/plural#n) 传入，然后提供源语言使用的形式。[`<Plural>`](/docs/react/reference/components/plural) 会根据当前区域设置的 [Unicode CLDR 复数规则](https://cldr.unicode.org/index/cldr-spec/plural-rules) 选择正确的形式。

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { T, Plural, Num } from 'gt-react';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { T, Plural, Num } from 'gt-next';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { T, Plural, Num } from 'gt-tanstack-start';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { T, Plural, Num } from 'gt-react-native';

    <T>
      <Plural
        n={count}
        one={<Text>You have <Num>{count}</Num> message.</Text>}
        other={<Text>You have <Num>{count}</Num> messages.</Text>}
      />
    </T>;
    ```
  </Tab>
</Tabs>

提供源语言使用的 [`复数类别`](/docs/react/reference/components/plural#form)——英语通常为 `one` 和 `other`。翻译人员会提供每种目标语言所需的类别，可能包括 `zero`、`two`、`few` 和 `many`。

如果没有精确匹配的类别，[`<Plural>`](/docs/react/reference/components/plural) 会依次使用 `plural` 分支和 `other` 分支。仅当这两个通用分支都不存在时，[`children`](/docs/react/reference/components/plural#children) 才会渲染：

```tsx
<T>
  <Plural n={count} one={<>One result</>}>
    <Num>{count}</Num> results
  </Plural>
</T>;
```

## 使用 `<Branch>` 按值分支显示内容 [#branch]

当内容取决于计数以外的值时，请使用 [`<Branch>`](/docs/react/reference/components/branch)。将该值作为 [`branch`](/docs/react/reference/components/branch#branch) 传入，为每个预期值添加一个 [prop](/docs/react/reference/components/branch#value)，并将 [`children`](/docs/react/reference/components/branch#children) 用作后备内容。

```tsx
<T>
  <Branch
    branch={plan}
    free={<p>Upgrade to unlock more.</p>}
    pro={<p>Thanks for going Pro!</p>}
  >
    <p>Welcome.</p>
  </Branch>
</T>;
```

每个分支都会单独翻译，因此译者可以调整完整措辞，而无需迁就内联 JavaScript 条件判断。

### 替换 `<T>` 内的条件表达式

内联三元运算符会使 [`<T>`](/docs/react/reference/components/t) 的子元素变为动态内容，导致无法可靠地提取。请使用 [`<Branch>`](/docs/react/reference/components/branch) 表达相同的条件：

```tsx
// ❌ 内联条件表达式
<T>{isActive ? 'Active' : 'Inactive'}</T>;

// ✅ 可翻译的分支
<T>
  <Branch branch={isActive} true="Active">
    Inactive
  </Branch>
</T>;
```

*注意：[`<Branch>`](/docs/react/reference/components/branch) 会忽略 `data-*` 属性，因为非保留属性会被视为分支值。请将测试 ID 和其他数据属性添加到包装元素上；[`no-data-attrs-on-branch`](/docs/react/reference/lint-rules#no-data-attrs) lint 规则会标记此类错误。*

## Next steps

- /docs/react/guides/formatting-variables
- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/translating-with-dictionaries

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.