<Plural>

概述

我们使用 <Plural> 组件来处理句子的变位。想想这两个句子之间的区别："You have one item." 和 "You have two items."

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

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

参考

Props

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

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

描述

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

返回值

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

抛出异常

如果未提供 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> 结合使用。了解更多关于变量组件的信息这里。

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

<Plural>

在本页面