# General Translation Knowledge Base: Come si gestiscono i plurali in React? URL: https://generaltranslation.com/it/kb/how-to-handle-plurals-in-react.mdx Docs index: https://generaltranslation.com/llms.txt Description: Per gestire i plurali in React, fornisci per ogni lingua una frase per ciascuna forma plurale e scegli quella corretta in base alle regole del plurale di quella lingua, dato che l'inglese ha 2 forme, il russo 4 e l'arabo 6. Il componente `` di General Translation in gt-react e gt-next accetta le tue forme sorgente, e General Translation genera le forme necessarie per ogni lingua di destinazione. Category: Formattazione per impostazione regionale Last updated: 2026-10-21 Authors: Archie McKenzie Published: 2025-02-17 Per gestire i plurali in React, fornisci per ogni lingua una frase per ciascuna forma plurale e scegli quella giusta per ogni quantità in base alle regole del plurale di quella lingua. A occuparsi della scelta è [`Intl.PluralRules`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules), integrato in JavaScript: associa un numero a una categoria di plurale definita dal CLDR (Common Locale Data Repository) di Unicode. L'inglese ha 2 categorie, il russo e il polacco ne hanno 4, l'arabo 6 e il giapponese 1. Un controllo `count === 1` funziona solo per l'inglese. Il russo usa tre forme per i numeri interi, "1 файл", "2 файла" e "5 файлов" (1 file, 2 file, 5 file), e 21 prende la stessa forma di 1. Un controllo che mostra "файл" per 1 e "файлов" per qualsiasi altra quantità renderizza "2 файлов" e "21 файлов", entrambi errati. ## Video The video is narrated in English, with English captions. [How do I handle plurals in React?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-how-to-handle-plurals-in-react.mp4) (48 s) General Translation handles plurals in React with the `Plural` component. Run `npx gt init` and sign in, give `Plural` the count and an English sentence for each form, wrap it in a `T` component with the count in `Num`, then run `npx gt translate` to write the forms each language needs. ## Quali sono le categorie di plurale in ciascuna lingua? CLDR definisce sei categorie di plurale: `zero`, `one`, `two`, `few`, `many` e `other`. Ogni lingua ne utilizza un sottoinsieme e, in base alle sue regole, ogni numero viene assegnato a una sola categoria di quel sottoinsieme. | Lingua | Categorie | Quali quantità ricadono in ciascuna categoria | | ------------------ | -------------------------------------------- | --------------------------------------------------------------------------------------------------------- | | Inglese | `one`, `other` | 1 è `one`; 0, 2, 5 e 1,5 sono `other` | | Giapponese, cinese | `other` | Tutte le quantità sono `other` | | Russo | `one`, `few`, `many`, `other` | 1, 21 e 101 sono `one`; da 2 a 4 e 22 sono `few`; 0, da 5 a 20 e 100 sono `many`; 1,5 è `other` | | Polacco | `one`, `few`, `many`, `other` | 1 è `one`; da 2 a 4 e 22 sono `few`; 0, da 5 a 21 e 100 sono `many`; 1,5 è `other` | | Arabo | `zero`, `one`, `two`, `few`, `many`, `other` | 0 è `zero`; 1 è `one`; 2 è `two`; da 3 a 10 sono `few`; da 11 a 99 sono `many`; da 100 a 102 sono `other` | Per elencare le categorie di una lingua, esegui `new Intl.PluralRules('ru').resolvedOptions().pluralCategories` nella console del browser. Per il russo, restituisce `one`, `few`, `many` e `other`. ## Come gestisco i plurali in un'app React multilingue? General Translation gestisce i plurali in React con il componente [``](/docs/react/reference/components/plural) di `gt-react`, oppure di `gt-next` in Next.js. Tu scrivi le forme previste dalla tua lingua di origine e General Translation genera quelle necessarie per ciascuna lingua di destinazione. 1. Passa il conteggio a [``](/docs/react/reference/components/plural) come `n`, con una prop per ogni forma della lingua sorgente, ad esempio `one` e `other` per l'inglese. 2. Racchiudi il conteggio in [``](/docs/react/reference/components/num) e l'intero [``](/docs/react/reference/components/plural) in [``](/docs/react/reference/components/t), in modo che ogni forma venga tradotta come frase completa, con il numero come variabile. 3. Esegui [`npx gt translate`](/docs/cli/reference/commands/translate) prima della build di produzione. General Translation traduce ogni forma e aggiunge le categorie usate da ciascuna lingua di destinazione: l'arabo, ad esempio, avrà sei forme e il russo quattro. ```tsx import { T, Plural, Num } from 'gt-react'; export function InboxCount({ count }: { count: number }) { return ( You have {count} message.} other={<>You have {count} messages.} /> ); } ``` Al momento del rendering, il componente [``](/docs/react/reference/components/plural) di General Translation sceglie la forma corrispondente a `count` in base alle [regole del plurale CLDR](https://cldr.unicode.org/index/cldr-spec/plural-rules) del locale attivo. Se quella categoria non è definita, usa `plural`, poi `other` e infine il proprio contenuto figlio. [``](/docs/react/reference/components/num) formatta il numero localmente con `Intl.NumberFormat`: 1000000 viene quindi renderizzato come 1,000,000 in inglese, 1.000.000 in tedesco e 10,00,000 in hindi, e il valore non viene mai inviato all'API di General Translation. Per mantenere aggiornate le traduzioni dei messaggi plurali quando i testi cambiano, esegui [`npx gt translate`](/docs/cli/reference/commands/translate) in CI, oppure [configura Locadex](/docs/platform/locadex/guides/configuring-automations), l'Agente IA di General Translation, in modo che traduca il nuovo contenuto di origine a ogni modifica di una pull request o a ogni push di un commit. I revisori possono correggere qualsiasi forma generata nell'[Editor di traduzione](/docs/platform/dashboard/guides/reviewing-translations) della dashboard di General Translation. La guida [Gestire plurali e rami](/docs/react/guides/handling-plurals-and-branches) illustra i passaggi per React, Next.js e per i pacchetti sperimentali `gt-tanstack-start` e `gt-react-native`. ## Come si gestisce il plurale di una stringa in un'app React solo in inglese? Un'app distribuita solo in inglese richiede due forme, `one` e `other`, quindi basta un piccolo helper. Passa frasi complete, così che i sostantivi irregolari ("person" e "people") e i verbi ("is" e "are") cambino in base al numero. ```ts title="pluralize.ts" const englishPlurals = new Intl.PluralRules('en-US'); export function pluralize(count: number, one: string, other: string): string { return englishPlurals.select(count) === 'one' ? one : other; } ``` ```tsx import { pluralize } from './pluralize'; export function CartSummary({ items, viewers }: { items: number; viewers: number }) { return ( <> {/* 1 articolo, 5 articoli */}

{pluralize(items, `${items} item`, `${items} items`)}

{/* 1 persona sta guardando, 3 persone stanno guardando */}

{pluralize(viewers, '1 person is watching', `${viewers} people are watching`)}

); } ``` Secondo le regole dell'inglese lo 0 rientra nella categoria `other`, quindi l'helper renderizza "0 items". L'helper ha le regole dell'inglese codificate in modo fisso e accetta due forme, mentre il russo ne richiede tre: quando l'app aggiunge una seconda lingua, sostituiscilo con [``](/docs/react/reference/components/plural) o con un'altra libreria di internazionalizzazione (i18n). ## Come si pluralizza una stringa al di fuori di JSX? Per il testo che deve essere una semplice stringa, come un `placeholder` o un `aria-label`, l'hook [`useGT`](/docs/react/reference/hooks/use-gt) di General Translation restituisce una funzione che accetta un messaggio plurale ICU (International Components for Unicode). Nel messaggio, `#` visualizza il valore del conteggio. ```tsx import { useGT } from 'gt-react'; export function ProductSearch({ count }: { count: number }) { const gt = useGT(); return ( ); } ``` Nei componenti asincroni di App Router, usa invece [`getGT`](/docs/react/nextjs/reference/functions/get-gt) da `gt-next/server`. Per il resto dell'API per le stringhe, consulta [Traduzione delle stringhe](/docs/react/guides/translating-strings). ## Come gestiscono i plurali react-i18next e react-intl? Entrambe le librerie determinano la categoria in base alle regole del plurale CLDR e leggono le frasi di ciascuna lingua da un file di catalogo: il tuo team o i tuoi traduttori devono quindi scrivere ogni forma di ogni messaggio in ogni lingua. Nessuna delle due librerie genera le traduzioni. [react-i18next](https://react.i18next.com/) memorizza una chiave per ogni categoria, usando la categoria come suffisso, e seleziona la chiave in base all'opzione `count`. ```json title="locales/en/translation.json" { "messages_one": "You have {{count}} message.", "messages_other": "You have {{count}} messages." } ``` ```tsx import { useTranslation } from 'react-i18next'; export function InboxCount({ count }: { count: number }) { const { t } = useTranslation(); return

{t('messages', { count })}

; } ``` Un file in arabo richiede sei chiavi, da `messages_zero` a `messages_other`. La [documentazione di i18next sui plurali](https://www.i18next.com/translation-function/plurals) elenca tutti i suffissi. [react-intl](https://formatjs.github.io/docs/react-intl/), la libreria React di FormatJS, raccoglie tutte le categorie in un'unica stringa ICU MessageFormat, in cui `#` rappresenta il conteggio formattato secondo l'impostazione regionale. ```tsx import { FormattedMessage } from 'react-intl'; export function InboxCount({ count }: { count: number }) { return ( ); } ``` Un catalogo arabo ripete il messaggio con i rami `zero`, `one`, `two`, `few`, `many` e `other`. La [guida alla sintassi ICU di FormatJS](https://formatjs.github.io/docs/core-concepts/icu-syntax/) illustra i rami plurali e le corrispondenze esatte come `=0`. ## Quale approccio usare per i plurali in React? | Approccio | Dove si trovano le forme | Chi scrive le forme di ogni lingua di destinazione | | ---------------------------------------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | | Un helper basato su `Intl.PluralRules` | Nel tuo codice, solo in inglese | Nessuno, perché l'app viene distribuita in una sola lingua | | react-i18next | Chiavi con suffisso in un file JSON per ogni lingua | Il tuo team o i traduttori | | react-intl | Messaggi ICU in un catalogo per ogni lingua | Il tuo team o i traduttori | | [``](/docs/react/reference/components/plural) di General Translation | Le forme nella lingua sorgente, in JSX | General Translation, durante l'esecuzione di [`npx gt translate`](/docs/cli/reference/commands/translate) | Usa un helper se l'app viene distribuita solo in inglese. Usa solo react-i18next o react-intl se il tuo team gestisce già file di catalogo e i traduttori scrivono a mano ogni forma. Usa [``](/docs/react/reference/components/plural) di General Translation se l'app viene distribuita in più lingue e i testi cambiano a ogni rilascio: General Translation scrive le forme di ogni lingua di destinazione per ciascun nuovo messaggio plurale. ## Domande frequenti ### Come faccio a mostrare "No items" quando il conteggio è 0? Le regole dell'inglese assegnano lo 0 alla categoria `other`, quindi un messaggio con solo `one` e `other` mostra "0 items". Con una stringa, aggiungi una corrispondenza esatta per lo zero al messaggio ICU che passi a [`useGT`](/docs/react/reference/hooks/use-gt): ```tsx gt('{count, plural, =0 {No items} one {# item} other {# items}}', { count }); ``` In JSX, controlla `count === 0` e renderizza lo stato vuoto in un blocco [``](/docs/react/reference/components/t) separato. ### Il componente Plural funziona in Next.js? Sì. Importa [``](/docs/react/reference/components/plural), [``](/docs/react/reference/components/t) e [``](/docs/react/reference/components/num) da `gt-next`: le props sono le stesse di `gt-react`. General Translation li include anche nei pacchetti sperimentali `gt-tanstack-start` e `gt-react-native`. ### Con quali valori conviene testare i plurali? Renderizza ogni messaggio plurale con i valori 0, 1, 2, 5, 11, 21 e 100 in ogni impostazione regionale di destinazione. Questi valori coprono tutte le categorie plurali dei numeri interi in inglese, russo, polacco e arabo. Aggiungi 1.5 per coprire anche `other` in russo e polacco. ## Related questions - [Come si traduce il testo condizionale in JSX?](https://generaltranslation.com/it/kb/translate-conditional-jsx.mdx): Mantieni la frase intera e traducine ogni versione, perché un operatore ternario la spezza in frammenti che perdono il loro significato e la loro posizione nell'ordine delle parole di ciascuna lingua. General Translation lo fa con `` all'interno di ``, che traduce la frase come un'unica unità. - [Posso fare i18n senza file di traduzione?](https://generaltranslation.com/it/kb/i18n-without-translation-files.mdx): Sì. Le librerie gt-react e gt-next di General Translation gestiscono l'i18n in React e Next.js senza chiavi di traduzione e senza dover mantenere un file JSON per ogni lingua. I testi restano inline nel JSX all'interno del componente `` e il comando gt translate genera le traduzioni per ogni lingua durante la build, sfruttando il contesto del tuo codice. Locadex può mantenerle aggiornate tramite pull request. - [Qual è la migliore libreria i18n per un'app React?](https://generaltranslation.com/it/kb/best-react-i18n-library.mdx): Le quattro principali librerie i18n per React sono gt-react di General Translation, react-i18next, Lingui e React Intl. Tutte e quattro renderizzano e formattano le traduzioni, ma solo gt-react è anche in grado di generarle, a partire dai testi scritti inline nel tuo JSX. Scegli react-i18next per continuare a usare i cataloghi e i plugin di i18next, Lingui per l'estrazione in cataloghi compilati e React Intl per FormatJS e ICU MessageFormat. ## Previous and next questions - Next question: [Come si traduce il testo condizionale in JSX?](https://generaltranslation.com/it/kb/translate-conditional-jsx.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/it/kb/sitemap.md) for every article.