概览

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

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

const count = 1;
<Plural n={count}
  singular={你有一件物品。}
  plural={你有一些物品。}
/>

参考资料

属性

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

描述

返回值

一个 JSX.Element，其中包含与 n 的复数形式相对应的内容；若无匹配则使用回退内容。

抛出

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

我应该添加哪些形式？

你只需根据所用语言使用相应的复数规则。

可选形式包括："singular"、"plural"、"dual"、"zero"、"one"、"two"、"few"、"many"、"other"。

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

在这里了解更多关于不同形式的说明。

示例

基本用法

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

import { Plural } from 'gt-next';

export default function ItemCount({ count }) {
  return (
    <Plural n={count} 
      singular={你有一件物品。}
      plural={你有一些物品。}
    />
  );
}

回退

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

import { Plural } from 'gt-next';

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

复数翻译

要完成翻译，只需添加 <T> 组件。

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

export default function ItemCount({ count }) {
  return (
  <T id="itemCount">
    <Plural n={count}
      singular={你有一件物品。} 
      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> 组件用于处理复数形式（pluralization）。
• 可用的复数分支（如 one、other、few、many）取决于所用 locale，并遵循 Unicode CLDR 复数规则。

下一步

• 需要更多示例，请查看分支组件的参考文档这里。
• 如需更进阶的用法，可将 <Plural> 与 <Currency>、<DateTime>、<Num>、<Var> 等变量组件结合使用。更多关于变量组件的内容请见这里。