概要

文の数に応じた言い回しを処理するために <Plural> コンポーネントを使用します。 次の文の違いを考えてみてください: "You have one item." と "You have two items."

英語では、アイテムの数に応じて2種類の文を用意する必要があります。 言語によっては、最大で6種類まで用意する必要があります。

const count = 1;
<Plural n={count}
  singular={アイテムが1つあります。}
  plural={アイテムがあります。}
/>

リファレンス

Props

[key]: string の構文は、複数形ルールの分岐を表す任意のキーを示します。 たとえば、singular や plural といった分岐をパラメータとして追加できます。

説明

戻り値

JSX.Element。n の値に対応する複数形の内容、またはフォールバックの内容を含みます。

例外

n が指定されていない、または有効な数値でない場合は Error をスローします。

どのフォームを追加すればよいですか？

対象言語に応じた複数形のフォームのみを使用してください。

使用できるフォームは次のとおりです: "singular", "plural", "dual", "zero", "one", "two", "few", "many", "other"。

• "en-US" を使用する開発者は、"singular" と "plural" の2種類のみを使用してください。
• "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={アイテムが1つあります。} 
      plural={アイテムがあります。} 
    />
  );
}

variables の追加

複数形の文に variables を追加したい場合はどうすればよいですか？

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> コンポーネントは複数形ルールの処理に使用します。
• 利用可能な複数形の分岐（例: one、other、few、many）は locale によって異なり、Unicode CLDR の複数形ルールに従います。

次のステップ

• さらに多くの例は、ブランチコンポーネントのリファレンスドキュメントをこちらでご確認ください。
• より高度な使い方として、<Plural> を <Currency>、<DateTime>、<Num>、<Var> といった変数コンポーネントと組み合わせて使用してください。変数コンポーネントの詳細はこちらをご覧ください。