# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Plural>`
URL: https://generaltranslation.com/zh/docs/react/reference/components/plural.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 使用当前区域设置的复数规则渲染基于计数的内容。`<Plural>` 组件的 API 参考。

`<Plural>` 组件会根据计数调整措辞，使句子在每种语言中都与数字保持一致。英语需要两种 (“one item” / “two items”) ，而其他语言最多可能需要六种。

*可用于 `gt-react`、`gt-next`、`gt-tanstack-start` 和 `gt-react-native`。*

## 概览 [#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) 匹配到相应的复数类别，并渲染该类别对应的分支。
* **分支后备内容。** 如果所选类别不可用，`<Plural>` 会依次使用 `plural` 和 `other`。仅当这两个通用分支都不存在时，才会渲染 `children`。
* **没有数字时也会使用后备内容。** 如果 `n` 缺失或不是有效数字，`<Plural>` 会渲染 `children` 作为后备内容，而不会抛出错误。

<Callout type="info">
  **v11.1.8 中的变更：** 缺少 `zero` 和 `one` 类别时，现在会先使用
  `plural` 或 `other` 作为后备内容，然后才使用 `children`，这与现有针对
  `two`、`few` 和 `many` 的行为一致。
</Callout>

## 应添加哪些形式 [#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` 匹配的确切类别、`plural` 或 `other` 分支时，将渲染此后备内容。

### `locales` [#locales]

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

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

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

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

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

## 示例 [#examples]

*示例从 `gt-react` 导入；请改为从您所用框架的 package 导入。*

```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) 用于按任意值进行分支处理。

## Sitemap

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