# react-native: Plural
URL: https://generaltranslation.com/zh/docs/react-native/api/components/plural.mdx
---
title: Plural
description: Plural 组件的 API 参考文档
---

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


## 概述

我们使用 `<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` 这样的分支作为参数。

### 说明

| 属性名             | 说明                                                                                                                                                                                      |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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-react-native';

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

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

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

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/react-native/guides/branches)的参考文档。
* 如需更高级的用法，可将 `<Plural>` 与 `<Currency>`、`<DateTime>`、`<Num>` 和 `<Var>` 等变量组件结合使用。有关更多信息，请参阅[使用变量组件](/docs/react-native/guides/variables)。