# General Translation React SDKs (gt-react, gt-next): 处理复数和分支
URL: https://generaltranslation.com/zh/docs/react/guides/handling-plurals-and-branches.mdx
---

title: 处理复数和分支
description: 如何在 React、Next.js、TanStack Start 和 React Native 中使用 General Translation 的 <Plural> 和 <Branch> 组件渲染基于数量和条件的内容。
related:
  links:
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/translating-with-dictionaries

---

会随数量或条件变化的文本不能写成单一的静态 `string`，因为不同语言的复数规则和表达变化各不相同。涉及数量时，请使用 [`<Plural>`](/docs/react/reference/components/plural)；涉及其他条件时，请使用 [`<Branch>`](/docs/react/reference/components/branch)，这样才能确保每种变化都被正确翻译。这两个组件在各个框架中的用法完全一致，唯一的区别是导入它们时使用的包不同。

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

将计数作为 `n` 传入，并为每种复数形式提供一个子节点。General Translation 会根据当前区域设置的复数规则，自动选择正确的形式。

<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>

提供源语言使用的复数类别 (通常为 `one` 和 `other`) ；翻译人员会为每种目标语言补充所需的类别，例如 `zero`、`two`、`few` 和 `many`。

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

使用 `<Branch>` 可根据任意值选择要显示的内容。将该值作为 `branch` 传入，并为每个可能的值提供对应的 child prop，再将 `children` 作为后备内容。从与 [`<T>`](/docs/react/reference/components/t) 相同的包中导入 `Branch`。

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

每个分支的子元素都会单独翻译，因此每种变体在各种语言中都能读起来很自然。

*注意：`<Branch>` 组件会忽略所有 `data-*` 属性。linter 的 [`no-data-attrs-on-branch`](/docs/react/reference/lint-rules) 规则会对此发出提示。*
## Next steps

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