<Plural>

概要

文の活用を処理するために <Plural> コンポーネントを使用します。 「You have one item.」と「You have two items.」の文の違いを考えてみてください。

英語では、アイテムの数に応じて2つの異なる文を定義する必要があります。 他の言語では、最大で6つまで定義しなければならない場合もあります。

const count = 1;
<Plural n={count}
  singular={You have one item.}
  plural={You have some items.}
/>

リファレンス

Props

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

説明

戻り値

n の複数形に対応するコンテンツ、またはフォールバックコンテンツを含む JSX.Element。

例外

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

どの形を追加すればよいですか？

あなたの言語で複数形のみを使用する必要があります。

利用可能な形は次のとおりです: "singular"、"plural"、"dual"、"zero"、"one"、"two"、"few"、"many"、"other"。

• あなたが "en-US" を使用している開発者の場合は、"singular" と "plural" の2つだけを使用してください。
• あなたが "zh-CN" の開発者の場合は、"other" のみを使用してください。

さまざまな形についての詳細はこちらをご覧ください。

例

基本的な使い方

複数形の処理には <Plural> コンポーネントを使用します。

import { Plural } from 'gt-next';

export default function ItemCount({ count }) {
  return (
    <Plural n={count} 
      singular={You have one item.}
      plural={You have some items.}
    />
  );
}

フォールバック

n に渡された値がどの分岐にも一致しない場合、フォールバックを指定できます。

import { Plural } from 'gt-next';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={You have one item.}
    >
      You have some items. // [!code highlight]
    </Plural>
  );
}

複数形の翻訳

翻訳するには、<T> コンポーネントを追加するだけです。

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

export default function ItemCount({ count }) {
  return (
  <T id="itemCount">
    <Plural n={count}
      singular={You have an item.} 
      plural={You have some items.} 
    />
  );
}

変数の追加

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

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

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={You have <Num>{count}</Num> item.} 
      plural={You have <Num>{count}</Num> items.} 
    />
  );
}

<T> コンポーネント内では、すべての動的コンテンツを <Currency>、<DateTime>、<Num>、または <Var> でラップしてください。

<T id="itemCount">
  <Plural n={count}
    singular={You have <Num>{count}</Num> item.} 
    plural={You have <Num>{count}</Num> items.} 
  />
</T>

注意事項

• <Plural>コンポーネントは複数形の処理に使用されます。
• 利用可能な複数形の分岐（例：one、other、few、many）はロケールによって異なり、Unicode CLDR 複数形ルールに従います。

次のステップ

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

複数形や分岐についてさらに詳しく知りたい場合は、Using Branching Componentsをご覧ください。