Panoramica

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

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

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

Riferimenti

Props

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

Descrizione

Restituisce

JSX.Element che contiene il contenuto corrispondente alla forma plurale di n, oppure il contenuto di fallback.

Genera

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

Quali forme dovrei 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", usa solo due forme: "singular" e "plural".
• Se sei uno sviluppatore che usa "zh-CN", usa solo "other".

Scopri di più sulle diverse forme qui.

Esempi

Utilizzo di base

Usa il componente <Plural> per gestire le forme plurali.

import { Plural } from 'gt-next';

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

Ripiegamenti

Puoi fornire un ripiego nel caso in cui il valore passato a n non abbia rami corrispondenti.

import { Plural } from 'gt-next';

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

Tradurre i plurali

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

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

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

Aggiunta di variabili

E se volessimo aggiungere delle variabili alla frase al plurale?

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

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

Quando sei all'interno di un componente <T>, avvolgi tutto il contenuto dinamico con <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 plurali disponibili (ad es. one, other, few, many) dipendono dalla lingua/locale e seguono le regole di pluralizzazione CLDR di Unicode.

Prossimi passi

• Per altri esempi, consulta la documentazione di riferimento sui componenti con diramazioni qui.
• Per un utilizzo più avanzato, combina <Plural> con componenti variabili come <Currency>, <DateTime>, <Num> e <Var>. Scopri di più sui componenti variabili qui.