概览

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

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

const count = 1;
<Plural n={count}
  singular={您有 1 个项目。}
  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-react';

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

兜底

当传递给 n 的 value 没有任何匹配分支时，你可以提供一个兜底选项。

import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={你有 1 件物品。}
    >
      你有一些物品。 // [!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> 等变量组件组合使用。关于变量组件的更多信息，请参见此处。