# General Translation React SDKs (gt-react, gt-next): Plural
URL: https://generaltranslation.com/zh/docs/react/reference/components/plural.mdx
---

title: Plural
description: 使用当前区域设置的复数规则，通过 General Translation gt-react 渲染基于计数的内容。Plural 的 API 参考。

---

`<Plural>` 组件会根据计数并结合当前区域设置的复数规则，对句子形式进行变化。它会为数字选择正确的形式——英语需要两种 (“one item” / “two items”) ，而其他语言最多可能需要六种。

*可用于 `gt-react`、`gt-next`、`gt-tanstack-start` 和 `gt-react-native`。示例从 `gt-react` 导入；请改为从你所用框架对应的包中导入。*

## 概览 [#overview]

将计数作为 `n` 传入，并为每种复数形式分别提供一个 child prop。

```tsx
<Plural
  n={count}
  one={<>You have one item.</>}
  other={<>You have some items.</>}
/>
```

*注意：要翻译各个分支，请将 `<Plural>` 放在 [`<T>`](/docs/react/reference/components/t) 内，并将其中的动态值包裹在变量组件中，例如 [`<Num>`](/docs/react/reference/components/num)。*

## 工作方式 [#how-it-works]

* **按区域设置选择。** `n` 的值会根据当前区域设置的 [Unicode CLDR 复数规则](https://cldr.unicode.org/index/cldr-spec/plural-rules) 匹配到相应的复数类别，并渲染该类别对应的分支。
* **后备内容。** 如果没有匹配的分支，则渲染 `children` 作为后备内容。
* **没有数字时也会回退。** 如果 `n` 缺失或不是有效数字，`<Plural>` 会渲染 `children` 作为后备内容，而不会抛出错误。

## 应添加哪些形式 [#forms]

你只需要添加你的语言实际使用的复数形式。可用的形式有 `zero`、`one`、`two`、`few`、`many`、`other`，以及别名 `singular`、`dual` 和 `plural`。

* 对于 `en-US`，使用 `one` 和 `other` (或 `singular` 和 `plural`) 。
* 对于 `zh-CN`，只需要 `other`。

各语言支持哪些形式，请参阅 [CLDR plural rules](https://cldr.unicode.org/index/cldr-spec/plural-rules)。

## 属性 [#props]

| Prop                    | 描述                | Type        | 可选 | 默认值    |
| ----------------------- | ----------------- | ----------- | -- | ------ |
| [`n`](#n)               | 用于选择复数形式的计数值。     | `number`    | 否  | —      |
| [`children`](#children) | 当没有匹配的分支时显示的后备内容。 | `ReactNode` | 是  | —      |
| [`locales`](#locales)   | 用于覆盖复数规则所用区域设置。   | `string[]`  | 是  | 当前区域设置 |
| [`[form]`](#form)       | 某个复数类别对应的内容。      | `ReactNode` | 是  | —      |

### `n` [#n]

**类型** `number` · **必填**

用于确定复数形式的数值。如果未提供或不是有效数字，`<Plural>` 会渲染 `children` 作为后备内容，而不会抛出错误。

### `children` [#children]

**类型** `ReactNode` · **可选**

当没有与 `n` 匹配的复数分支时，将渲染此后备内容。

### `locales` [#locales]

**类型** `string[]` · **可选** · **默认值** 当前区域设置

将采用这些区域设置的复数规则。省略时，将使用当前区域设置。

### `[form]` [#form]

**类型** `ReactNode` · **可选**

用于各个复数类别的 prop——`zero`、`one`、`two`、`few`、`many`、`other` (或别名 `singular`、`dual` 和 `plural`) 。可用类别取决于区域设置。

## 示例 [#examples]

```tsx title="BasicExample.tsx"
import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural
      n={count} // [!code highlight]
      one={<>You have one item.</>}
      other={<>You have some items.</>}
    />
  );
}
```

```tsx title="FallbackExample.tsx"
import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count} one={<>You have one item.</>}>
      You have some items. // [!code highlight]
    </Plural>
  );
}
```

```tsx title="PluralExample.tsx"
import { T, Plural, Num } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> item.</>} // [!code highlight]
        other={<>You have <Num>{count}</Num> items.</>} // [!code highlight]
      />
    </T>
  );
}
```

## 备注 [#notes]

* `<Plural>` 会根据当前区域设置处理复数变化。
* 可用的分支取决于区域设置，并遵循 [Unicode CLDR 复数规则](https://cldr.unicode.org/index/cldr-spec/plural-rules)。
* 如需按任意值进行分支处理，请参阅 [`<Branch>`](/docs/react/reference/components/branch)。