概览

我们使用 <Plural> 组件来处理语句的复数变化。 想想这两句话的区别：“You have one item.” 和 “You have two items.”

在英语中，需要根据数量定义两种不同的句式。 在其他语言中，可能需要多达六种。

const count = 1;
<Plural n={count}
  singular={您有一个项目。}
  plural={您有一些项目。}
/>

参考资料

Props

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

描述

返回

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

抛出

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

我应该添加哪些形式？

你只需要使用你所用语言的复数规则对应的形式。

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

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

在此处了解不同形式的更多信息。

示例

基本用法

使用 <Plural> 组件来处理复数规则（pluralization）。

import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count} 
      singular={您有一个项目。}
      plural={您有多个项目。}
    />
  );
}

回退

当传递给 n 的 value 没有匹配的分支时，你可以提供一个回退内容。

import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={您有一个项目。}
    >
      您有一些项目。 // [!code highlight]
    </Plural>
  );
}

复数翻译

要实现翻译，只需添加 <T> 组件。

import { T, Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
  <T id="itemCount">
    <Plural n={count}
      singular={您有一个项目。} 
      plural={您有一些项目。} 
    />
  );
}

添加变量

如果我们想在这个复数句子里添加一些变量，该怎么做？

import { T, Plural, Num } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={您有 <Num>{count}</Num> 个项目。} 
      plural={您有 <Num>{count}</Num> 个项目。} 
    />
  );
}

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

<T id="itemCount">
  <Plural n={count}
    singular={您有 <Num>{count}</Num> 个项目。} 
    plural={您有 <Num>{count}</Num> 个项目。} 
  />
</T>

备注

• 使用 <Plural> 组件处理复数（pluralization）。
• 可用的复数分支（如 one、other、few、many）取决于 locale，并遵循 Unicode CLDR 复数规则。

后续步骤

• 如需更多示例，请参阅分支组件的参考文档此处。
• 若需更高级的用法，可将 <Plural> 与变量组件（如 <Currency>、<DateTime>、<Num> 和 <Var>）结合使用。了解变量组件的更多信息此处。