<Plural>

概述

我们使用 <Plural> 组件来处理句子的变位。想想这两句话的区别：“你有一个物品。” 和 “你有两个物品。”

在英语中，你必须根据物品的数量定义两个不同的句子。在其他语言中，你最多需要定义六个。

const count = 1;
<Plural n={count}
  singular={You have one item.}
  plural={You have some items.}
/>

参考

属性

Prop	Type	Default
`n?`	`number`	-
`children??`	`any`	`undefined`
`locales??`	`string[]`	`undefined`
`[key]: string?`	`string \| JSX.Element`	-

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

描述

属性名称	描述
`n`	用于确定复数形式的数字。这是复数化所必需的。
`children`	如果没有找到匹配的复数分支，则渲染的回退内容。
`locales`	可选的区域设置，用于指定格式化的区域。如果未提供，则使用默认的用户区域。阅读更多关于指定区域的信息这里。
`[key]: string`	表示复数形式的分支。确切的分支取决于区域。

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

抛出

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

我应该添加哪些形式？

您只需要使用您语言中的复数形式。

可能的形式有："singular"，"plural"，"dual"，"zero"，"one"，"two"，"few"，"many"，"other"。

如果您是使用 "en-US" 的开发者，只需使用两种形式："singular" 和 "plural"。
如果您是 "zh-CN" 的开发者，只需使用 "other"。

在这里阅读更多关于不同形式的信息。

示例

基本用法

使用 <Plural> 组件来处理复数形式。

BasicExample.jsx

import { Plural } from 'gt-next';
 
export default function ItemCount({ count }) {
  return (
    <Plural n={count} 
      singular={You have one item.}
      plural={You have some items.}
    />
  );
}

备用方案

如果传递给 n 的值没有匹配的分支，可以提供一个备用方案。

FallbackExample.jsx

import { Plural } from 'gt-next';
 
export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={You have one item.}
    >
      You have some items. // [!code highlight]
    </Plural>
  );
}

翻译复数形式

要进行翻译，只需添加 <T> 组件。

PluralExample.jsx

import { T, Plural } from 'gt-next';
 
export default function ItemCount({ count }) {
  return (
  <T id="itemCount">
    <Plural n={count}
      singular={You have an item.} 
      plural={You have some items.} 
    />
  );
}

添加变量

如果我们想在复数句子中添加一些变量怎么办？

PluralExample.jsx

import { T, Plural, Num } from 'gt-next';
 
export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={You have <Num>{count}</Num> item.} 
      plural={You have <Num>{count}</Num> items.} 
    />
  );
}

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

<T id="itemCount">
  <Plural n={count}
    singular={You have <Num>{count}</Num> item.} 
    plural={You have <Num>{count}</Num> items.} 
  />
</T>

注意事项

<Plural> 组件用于处理复数形式。
可用的复数分支（例如，one, other, few, many）取决于语言环境，并遵循Unicode CLDR 复数化规则。

下一步

有关更多示例，请查看关于分支组件的参考文档这里。
对于更高级的用法，将 <Plural> 与变量组件如 <Currency>、<DateTime>、<Num> 和 <Var> 结合使用。阅读更多关于变量组件的信息这里。

要深入了解复数化和分支，请访问使用分支组件。