# General Translation Knowledge Base: Come si traduce il testo condizionale in JSX? URL: https://generaltranslation.com/it/kb/translate-conditional-jsx.mdx Docs index: https://generaltranslation.com/llms.txt Description: 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à. Category: Internazionalizzazione Last updated: 2026-10-21 Authors: Ernest McCarter Published: 2025-09-26 Per tradurre il testo condizionale in JSX (il testo scelto da un operatore ternario o da un'altra condizione), mantieni la frase intera e traducine ogni versione. Un ternario come `I eat lunch at {atHome ? 'home' : 'work'}.` spezza una frase in frammenti. Tradotti singolarmente, "home" e "work" perdono la frase che dà loro significato, e il codice li lascia alla fine della frase inglese. Ma l'ordine delle parole cambia da lingua a lingua: il cinese, per esempio, mette il luogo prima del verbo, come in 我在家吃午餐 ("Pranzo a casa"). | Approccio | Punti di forza | Cosa resta a tuo carico | | --------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Solo una libreria di internazionalizzazione (i18n) (`i18next`, `react-intl`, `next-intl`) | Una chiave di contesto per versione (`i18next`) o un messaggio ICU (International Components for Unicode) `select` (`react-intl`, `next-intl`) raccoglie tutte le versioni della frase | Spostare la frase da JSX a un file di chiavi e scrivere ogni versione in ogni lingua | | Google Translate | Traduzione rapida e generica del testo, una stringa alla volta | Scrivere ogni versione come frase completa, reinserire i risultati nel codice e ripetere entrambe le operazioni a ogni modifica del testo | | Un'API di IA diretta (OpenAI API, Claude API) | Traduzione fluida dell'intera frase, se la invii con tutte le sue versioni | Raccogliere ogni versione con il relativo contesto, mantenere la coerenza terminologica tra un rilascio e l'altro, la revisione e il caricamento dei risultati nell'app | | General Translation ([``](/docs/react/reference/components/t) con [``](/docs/react/reference/components/branch)) | [``](/docs/react/reference/components/t) traduce la frase come un'unica unità, con tutte le versioni in un unico [``](/docs/react/reference/components/branch), e la formulazione completa di ciascuna versione può variare a seconda della lingua | Sostituire il ternario con [``](/docs/react/reference/components/branch) (all'interno di [``](/docs/react/reference/components/t) se ne occupa una correzione automatica di ESLint), una configurazione una tantum e rieseguire [`npx gt translate`](/docs/cli/reference/commands/translate) quando il testo cambia | Usa un semplice ternario se l'app viene distribuita in una sola lingua. Usa solo una libreria i18n se il testo si trova già in file di chiavi compilati dai traduttori, e Google Translate o un'API di IA diretta per una frase da tradurre una volta sola. Usa [``](/docs/react/reference/components/branch) all'interno di [``](/docs/react/reference/components/t) se la frase si trova in JSX e deve restare tradotta anche quando il testo cambia. Se è un numero a determinare la formulazione, usa invece [``](/docs/react/reference/components/plural), perché le regole del plurale variano da lingua a lingua: l'inglese ha 2 forme, l'arabo 6. Le librerie `gt-react` e `gt-next` di General Translation gestiscono la condizione con il componente [``](/docs/react/reference/components/branch) all'interno di [``](/docs/react/reference/components/t). Passa il valore come `branch` (una stringa, un numero o un booleano), aggiungi una prop per ciascun valore e inserisci il fallback in `children`, che viene renderizzato quando nessuna prop corrisponde. Se la condizione incide sulla grammatica oltre una singola parola, inserisci la frase completa in ciascun branch, così i traduttori possono adattarne l'intera formulazione. Ecco come un ternario inline all'interno di [``](/docs/react/reference/components/t) diventa un [``](/docs/react/reference/components/branch): ```tsx // Condizionale inline {isActive ? 'Active' : 'Inactive'}; // Rami traducibili Inactive ; ``` Il plugin ESLint di General Translation, `@generaltranslation/react-core-linter`, segnala gli operatori ternari all'interno di [``](/docs/react/reference/components/t), e `npx eslint . --fix` li converte in un [``](/docs/react/reference/components/branch). A quel punto, [`npx gt translate`](/docs/cli/reference/commands/translate) traduce ogni [``](/docs/react/reference/components/t) in tutte le impostazioni regionali elencate in `gt.config.json`. La guida [Gestire plurali e branch](/docs/react/guides/handling-plurals-and-branches) illustra la procedura completa, mentre la [Panoramica di React](/docs/react/overview#frameworks) rimanda all'Avvio rapido di ciascun framework. ## Video The video is narrated in English, with English captions. [How do I translate conditional text in JSX?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-conditional-jsx.mp4) (46 s) General Translation lets you wrap whole sentences in `T` and express conditions with `Branch`. Run `npx gt init`, choose Japanese and Chinese and sign in, put the sentence in a `T` component with a `Branch` so the translator sees it whole, then run `npx gt translate` to write Japanese and Chinese with the place before the verb. ## Come si traduce una frase con una variabile e un link in React? Per tradurre una frase che contiene una variabile e un link, mantieni la frase, la variabile e il testo del link in un'unica voce di traduzione. In questo modo ogni lingua riceve la frase completa e può collocare il nome e il link dove richiesto dalla propria grammatica. Se si suddivide `Hi {name}, read the terms of service before you continue.` in "Hi", "read the", "terms of service" e "before you continue", i traduttori ricevono quattro frammenti senza il contesto della frase, e il codice li vincola all'ordine delle parole inglese. | Approccio | Come la frase indica il link | Cosa resta a tuo carico | | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | Stringhe separate per ogni parte | Il testo del link è una stringa a sé | Frammenti senza il contesto della frase, nell'ordine delle parole inglese | | react-i18next `` | Un tag numerato come `<3>terms of service`, oppure un tag con nome definito nella prop `components` | Scrivere la stringa in ogni lingua e rinumerare i tag quando il JSX cambia | | react-intl `` | Un tag con nome come `terms of service`, renderizzato da una funzione in `values` | Scrivere il messaggio in ogni lingua e mantenere i nomi dei tag allineati a `values` | | General Translation ([``](/docs/react/reference/components/t) con [``](/docs/react/reference/components/var)) | Il link, scritto come JSX all'interno della frase | Una configurazione una tantum e la riesecuzione di [`npx gt translate`](/docs/cli/reference/commands/translate) quando il testo cambia | Usa stringhe separate solo per il testo che non fa parte di una frase, come l'etichetta autonoma di un pulsante. Usa `` di react-i18next o `` di react-intl quando il testo si trova già in file di catalogo compilati dai traduttori, e preferisci i tag con nome, che restano invariati quando il JSX circostante cambia. Usa [``](/docs/react/reference/components/t) di General Translation con [``](/docs/react/reference/components/var) quando la frase si trova nel JSX e deve restare tradotta anche quando il testo cambia. Le librerie `gt-react` e `gt-next` di General Translation mantengono la frase intera con [``](/docs/react/reference/components/t): racchiudi la frase in [``](/docs/react/reference/components/t), inserisci il valore dinamico in [``](/docs/react/reference/components/var) e scrivi il link come normale JSX all'interno della frase. ```tsx import { T, Var } from 'gt-react'; export function TermsNotice({ name }: { name: string }) { return (

Hi {name}, read the terms of service before you continue.

); } ``` Il componente [``](/docs/react/reference/components/t) di General Translation traduce il paragrafo come un'unica unità, testo del link compreso, e mantiene l'elemento `` e il relativo `href` così come sono scritti. [``](/docs/react/reference/components/var) renderizza `name` senza modificarlo, non lo invia mai all'API di General Translation e lo colloca nel punto della frase richiesto da ciascuna impostazione regionale. Se scrivi `{name}` senza [``](/docs/react/reference/components/var), la regola di lint [`static-jsx`](/docs/react/reference/lint-rules#static-jsx) di General Translation lo segnala e `npx eslint . --fix` lo racchiude in [``](/docs/react/reference/components/var). Nell'App Router di Next.js, importa [``](/docs/react/reference/components/t) e [``](/docs/react/reference/components/var) da `gt-next` di General Translation e scrivi il link con [`Link` da `gt-next/link`](/docs/react/nextjs/link), che aggiunge il prefisso del locale agli URL interni: per un visitatore di lingua spagnola, ad esempio, `/terms` diventa `/es/terms`. ## In che modo il componente Trans di react-i18next e il componente T di General Translation gestiscono gli elementi annidati? Il componente `` di react-i18next renderizza una frase contenente elementi React a partire da un'unica stringa per lingua, in cui ogni elemento è identificato dalla sua posizione tra i figli di ``. In questa frase i figli sono il testo prima del nome, il valore `name`, il testo prima del link, il link e il testo finale; il link è quindi il figlio 3, contando da 0: ```tsx import { Trans } from 'react-i18next'; export function TermsNotice({ name }: { name: string }) { return ( Hi {{ name }}, read the terms of service before you continue. ); } ``` ```json title="locales/en/translation.json" { "termsNotice": "Hi {{name}}, read the <3>terms of service before you continue." } ``` Un elemento annidato all'interno di un altro elemento viene numerato tra i figli di quel genitore. Gli elementi senza attributi appartenenti a un breve elenco predefinito (`
`, ``, `` e `

`) mantengono il proprio nome nella stringa. La prop `components` sostituisce i numeri con dei nomi: con `components={{ termsLink: }}`, la stringa diventa `terms of service`. Anche `` di react-intl usa i nomi: il messaggio contiene `terms of service` e `values` associa `link` a una funzione che restituisce l'elemento ``. Quando gli elementi annidati non vengono più tradotti con ``, di solito la stringa e il JSX non sono allineati. Aggiungere o rimuovere un figlio prima del link fa slittare tutti i numeri successivi, quindi la stringa va rinumerata in ogni lingua. Un numero che punta al figlio sbagliato renderizza il contenuto errato o fa sparire il link, mentre un tag con nome assente da `components` viene renderizzato come testo letterale. Con [``](/docs/react/reference/components/t) di General Translation non scrivi alcuna stringa di traduzione e non devi tenere sincronizzato alcun numero. Il JSX compreso tra i tag [``](/docs/react/reference/components/t) è la sorgente: General Translation identifica la voce in base al suo contenuto e registra ogni elemento annidato con il relativo tag e un identificatore interno assegnato da General Translation. Il testo all'interno di qualsiasi elemento scritto tra i tag [``](/docs/react/reference/components/t) viene tradotto insieme al resto della frase, a qualsiasi livello di annidamento, come in questo esempio tratto dal [riferimento di ``](/docs/react/reference/components/t#overview) di General Translation: ```tsx Today, I went to

the store to buy some groceries.

``` Il componente [``](/docs/react/reference/components/t) di General Translation traduce solo il contenuto scritto letteralmente tra i suoi tag: un componente figlio che renderizza internamente il proprio testo, come `