# gt-react: General Translation React SDK: Plural
URL: https://generaltranslation.com/zh/docs/react/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 的更多信息，请参阅[这里](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-react';

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-react';

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-react';

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-react';

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

## 后续步骤

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