Panoramica

Utilizziamo il componente <Plural> per gestire le frasi con le forme plurali. Pensa alla differenza tra le frasi: "Hai un elemento." e "Hai due elementi."

In inglese è necessario definire due frasi diverse in base al numero di elementi. In altre lingue, è necessario definirne fino a sei.

const count = 1;
<Plural n={count}
  singular={Hai un elemento.}
  plural={Hai alcuni elementi.}
/>

Riferimenti

Props

La sintassi [key]: string indica chiavi arbitrarie che rappresentano possibili rami di pluralizzazione. Ad esempio, rami come singular e plural possono essere aggiunti come parametri.

Descrizione

Restituisce

JSX.Element contenente il contenuto corrispondente alla forma plurale di n oppure il contenuto di fallback.

Eccezioni

Error se n non è specificato o non è un numero valido.

Quali forme devo aggiungere?

Devi usare solo le forme plurali previste nella tua lingua.

Le forme possibili sono: "singular", "plural", "dual", "zero", "one", "two", "few", "many", "other".

• Se sei uno sviluppatore che usa "en-US", usane solo due: "singular" e "plural".
• Se sei uno sviluppatore in "zh-CN", usa solo "other".

Scopri di più sulle diverse forme qui.

Esempi

Utilizzo di base

Usa il componente <Plural> per gestire la pluralizzazione.

import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count} 
      singular={Hai un elemento.}
      plural={Hai alcuni elementi.}
    />
  );
}

Fallback

Puoi fornire un fallback nel caso in cui il valore passato a n non corrisponda ad alcun ramo.

import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={Hai un elemento.}
    >
      Hai alcuni elementi. // [!code highlight]
    </Plural>
  );
}

Tradurre i plurali

Per tradurre, ti basta aggiungere il componente <T>.

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

export default function ItemCount({ count }) {
  return (
  <T id="itemCount">
    <Plural n={count}
      singular={Hai un elemento.} 
      plural={Hai degli elementi.} 
    />
  );
}

Aggiungere variabili

E se volessimo aggiungere alcune variabili alla frase al plurale?

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

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={Hai <Num>{count}</Num> elemento.} 
      plural={Hai <Num>{count}</Num> elementi.} 
    />
  );
}

All’interno di un componente <T>, racchiudi tutto il contenuto dinamico in <Currency>, <DateTime>, <Num> o <Var>.

<T id="itemCount">
  <Plural n={count}
    singular={Hai <Num>{count}</Num> elemento.} 
    plural={Hai <Num>{count}</Num> elementi.} 
  />
</T>

Note

• Il componente <Plural> viene utilizzato per gestire la pluralizzazione.
• I rami di plurale disponibili (ad es. one, other, few, many) dipendono dalla lingua/locale e seguono le regole di pluralizzazione di Unicode CLDR.

Prossimi passaggi

• Per altri esempi, consulta la documentazione di riferimento sui componenti ramificati qui.
• Per casi d’uso più avanzati, combina <Plural> con componenti variabili come <Currency>, <DateTime>, <Num> e <Var>. Scopri di più sui componenti variabili qui.