# gt-next: General Translation Next.js SDK: Plural
URL: https://generaltranslation.com/zh/docs/next/api/components/plural.mdx
---
title: Plural
description: Plural 组件的 API 参考文档
---

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


## 概述

我们使用 `<Plural>` 组件来处理句子中的单复数变化。
可以比较一下这两句话的区别：&quot;You have one item.&quot; 和 &quot;You have two items.&quot;

在英语中，你需要根据项目数量定义两种不同的句子。
而在其他语言中，最多可能需要定义六种。

```jsx
const count = 1;
<Plural n={count}
  one={You have one item.}
  other={You have some items.}
/>
```


## 参考

### 属性

<TypeTable
  type={{
  "n": {
    description: '用于确定复数形式的数字。',
    type: 'number',
    optional: false,
  },
  "children?": {
    description: '当没有匹配的复数形式时的回退内容',
    type: 'any',
    optional: true,
    default: 'undefined',
  },
  "locales?": {
    type: 'string[]',
    optional: true,
    default: 'undefined',
  },
  "[key]: string": {
    type: 'string | JSX.Element',
    optional: false,
  },
}}
/>

`[key]: string` 语法表示可以使用任意键来表示可能的复数分支。
例如，可以添加 `singular` 和 `plural` 这样的分支作为参数。

### 说明

| Prop Name       | Description                                                                                                                                                                       |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `n`             | 用于确定复数形式的数值。复数处理必须提供此项。                                                                                                                                                           |
| `children`      | 如果未找到匹配的复数分支时渲染的回退内容。                                                                                                                                                             |
| `locales`       | 可选的 `locales`，用于指定格式化时使用的区域设置。若未提供，则使用用户的默认区域设置。有关如何指定 `locales`，请参阅[这里](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)。 |
| `[key]: string` | 表示复数形式的各个分支。具体有哪些分支取决于区域设置。                                                                                                                                                       |

### 返回值

包含与 `n` 对应的复数形式内容，或回退内容的 `JSX.Element`。

### 抛出

如果未提供 `n`，或 `n` 不是有效数字，则会抛出 `Error`。

***

## 我应该添加哪些形式？

你只需要使用适用于你的语言的复数形式。

可用的形式有：`"singular"`、`"plural"`、`"dual"`、`"zero"`、`"one"`、`"two"`、`"few"`、`"many"`、`"other"`。

* 如果你使用的是 `"en-US"`，只需使用两种：`"singular"` 和 `"plural"`。
* 如果你使用的是 `"zh-CN"`，只需使用 `"other"`。

在[这里](https://cldr.unicode.org/index/cldr-spec/plural-rules)了解不同形式的更多信息。

***

## 示例

### 基本用法

使用 `<Plural>` 组件处理复数变化。

```jsx title="BasicExample.jsx" copy
import { Plural } from 'gt-next';

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


### 回退内容

你可以提供一个回退内容，以防传递给 `n` 的值没有任何匹配的分支。

```jsx title="FallbackExample.jsx" copy
import { Plural } from 'gt-next';

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


### 翻译复数形式

要翻译复数形式，只需添加 `<T>` 组件。

```jsx title="PluralExample.jsx" copy
import { T, Plural } from 'gt-next';

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


### 添加变量

如果想在复数句子中加入一些变量，该怎么办？

```jsx title="PluralExample.jsx" copy
import { T, Plural, Num } from 'gt-next';

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

在 `<T>` 组件内，请用 `<Currency>`、`<DateTime>`、`<Num>` 或 `<Var>` 包裹所有动态内容。

```jsx
<T id="itemCount">
  <Plural n={count}
    one={You have <Num>{count}</Num> item.} // [!code highlight]
    other={You have <Num>{count}</Num> items.} // [!code highlight]
  />
</T>
```

***


## 说明

* `<Plural>` 组件用于处理复数变化。
* 可用的复数分支 (如 one、other、few、many) 取决于区域设置，并遵循 [Unicode CLDR 复数规则](https://cldr.unicode.org/index/cldr-spec/plural-rules)。

## 后续步骤

* 如需查看更多示例，请参阅[使用分支组件](/docs/next/guides/branches)参考文档。
* 如需了解更高级的用法，可以将 `<Plural>` 与 `<Currency>`、`<DateTime>`、`<Num>` 和 `<Var>` 等变量组件结合使用。更多信息请参阅[使用变量组件](/docs/next/guides/variables)。