概览

我们使用 <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> 组件来处理复数规则。

import { Plural } from 'gt-next';

export default function ItemCount({ count }) {
  return (
    <Plural n={count} 
      singular={你有 1 个条目。}
      plural={你有一些条目。}
    />
  );
}

后备

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

import { Plural } from 'gt-next';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={你有 1 件物品。}
    >
      你有一些物品。 // [!code highlight]
    </Plural>
  );
}

复数形式翻译

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

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

export default function ItemCount({ count }) {
  return (
  <T id="itemCount">
    <Plural n={count}
      singular={你有 1 件物品。} 
      plural={你有多件物品。} 
    />
  );
}

添加变量

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

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

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> 组件用于处理复数规则。
• 可用的复数分支（如 one、other、few、many）取决于 locale，并遵循 Unicode CLDR 复数规则。

后续步骤

• 想查看更多示例，请查看分支组件的参考文档此处。
• 如需更高级的用法，可将 <Plural> 与 <Currency>、<DateTime>、<Num>、<Var> 等变量组件配合使用。关于变量组件的更多内容请见此处。