<Plural>

概要

<Plural> コンポーネントは、文の活用を処理するために使用します。 「あなたは1つのアイテムを持っています。」と「あなたは2つのアイテムを持っています。」の違いを考えてみてください。

英語では、アイテムの数に基づいて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" を使用している開発者である場合、2つのみを使用してください: "singular" と "plural"。
• あなたが "zh-CN" の開発者である場合、"other" のみを使用してください。

さまざまな形式についての詳細はこちらを参照してください。

例

基本的な使い方

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

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

フォールバック

n に渡された値に一致する分岐がない場合にフォールバックを提供できます。

import { Plural } from 'gt-react';
 
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-react';
 
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-react';
 
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を訪問してください。