Обзор

Мы используем компонент <Plural> для согласования фраз по числу. Подумайте о разнице между предложениями: «You have one item.» и «You have two items.»

В английском языке нужно задавать два разных предложения в зависимости от количества элементов. В некоторых других языках таких вариантов может быть до шести.

const count = 1;
<Plural n={count}
  singular={У вас один элемент.}
  plural={У вас есть элементы.}
/>

Справка

Пропсы

Синтаксис [key]: string обозначает произвольные ключи, представляющие возможные ветви множественного числа. Например, ветви вроде singular и plural можно добавить как параметры.

Описание

Возвращает

JSX.Element с содержимым, соответствующим форме числа для n, либо запасным содержимым.

Исключения

Генерирует Error, если n не передан или не является допустимым числом.

Какие формы нужно добавить?

Используйте только те формы множественного числа, которые есть в вашем языке.

Возможные формы: "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={У вас один товар.}
      plural={У вас несколько товаров.}
    />
  );
}

Запасные варианты

Вы можете указать запасной вариант на случай, если значение, переданное в n, не соответствует ни одной ветви.

import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={У вас один предмет.}
    >
      У вас несколько предметов. // [!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}
    one={У вас <Num>{count}</Num> элемент.} 
    few={У вас <Num>{count}</Num> элемента.} 
    many={У вас <Num>{count}</Num> элементов.} 
  />
</T>

Примечания

• Компонент <Plural> используется для обработки форм множественного числа.
• Доступные варианты форм (например, one, other, few, many) зависят от локали и соответствуют правилам множественного числа Unicode CLDR.

Следующие шаги

• Больше примеров см. в справке по ветвящимся компонентам здесь.
• Для более продвинутых сценариев сочетайте <Plural> с компонентами переменных, такими как <Currency>, <DateTime>, <Num> и <Var>. Подробнее о компонентах переменных — здесь.