Обзор

Мы используем компонент <Plural> для построения фраз с правильными словоформами. Сравните предложения: «У вас один предмет.» и «У вас два предмета.»

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

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-next';

export default function ItemCount({ count }) {
  return (
    <Plural n={count} 
      singular={У вас один товар.}
      plural={У вас несколько товаров.}
    />
  );
}

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

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

import { Plural } from 'gt-next';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={У вас один элемент.}
    >
      У вас есть элементы. // [!code highlight]
    </Plural>
  );
}

Перевод форм множественного числа

Все, что нужно для перевода, — это добавить компонент <T>.

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

export default function ItemCount({ count }) {
  return (
  <T id="itemCount">
    <Plural n={count}
      singular={У вас один предмет.} 
      plural={У вас несколько предметов.} 
    />
  );
}

Добавление переменных

А что, если нам нужно добавить несколько переменных в предложение с учетом множественного числа?

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

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>. Подробнее о компонентах переменных читайте здесь.