# 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: Anziché tradurre separatamente i due rami di un operatore ternario, racchiudi l'intera frase in un componente `` ed esprimi la condizione con ``, così il traduttore vede il contesto completo e può riordinare la frase in base alla lingua. Category: Internazionalizzazione Last updated: 2025-09-26 Authors: Ernest McCarter Published: 2025-09-26 ## 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. ## Introduzione Uno degli errori più comuni che vedo nell'internazionalizzazione è la tendenza a suddividere semplici operatori ternari in più chiamate di traduzione. Spesso ci si ritrova con qualcosa del genere: ```jsx 'use client' import { T, useGT } from 'gt-react' export default function ThemeSetting({ enabled }) { const gt = useGT() return ( <> Dark Mode: ) } ``` Nella maggior parte dei casi, funziona come previsto. Prima dell'introduzione dell'i18n, il codice era probabilmente qualcosa come `{ enabled ? 'On' : 'Off' }`. Aggiungere la funzione `gt()` per l'i18n è stata probabilmente solo un'estensione naturale della struttura del codice esistente. Ogni volta che vedo una cosa del genere, mi viene un brivido. Non è affatto così che la libreria è stata pensata per essere usata. Ci sono due motivi per cui si tratta di un errore, soprattutto quando si usa la traduzione automatica: (1) il contesto e (2) la flessibilità. ### Contesto Il significato non risiede solo nelle parole, ma anche nel modo in cui vengono presentate. La parola "back" su una freccia per tornare indietro ha con ogni probabilità un significato molto diverso dalla parola "back" (schiena) sul curriculum di un chiropratico. Inoltre, senza un contesto più ampio, i traduttori (anche quelli umani) potrebbero avere difficoltà a tradurre correttamente la parola. È famoso il caso del reparto i18n di WhatsApp che, in tedesco, tradusse la parola "crop" (ritaglia) di uno strumento di modifica delle immagini come "crop" nel senso di raccolto agricolo. Per ovviare a questo problema di contesto, possiamo fornire informazioni sulla presentazione del contenuto tramite i componenti [``](/docs/react/reference/components/t) e [``](/docs/react/reference/components/branch). Nel nostro esempio, questo darebbe al nostro "traduttore" un quadro più completo del significato di "on" e "off". ```jsx Dark Mode: ``` ### Flessibilità Oltre al contesto, un altro modo interessante per sfruttare la traduzione tramite LLM è la sua capacità di comprendere il codice. Vediamo un esempio in cui l'ordine dei componenti può cambiare a seconda della lingua: ```jsx I eat lunch at . ``` Abbiamo quindi due frasi possibili: * "Pranzo **a casa**" * "Pranzo **al lavoro**" In mandarino avremmo: * "我**在家**吃午餐" * "我**在公司**吃午餐" Il componente [``](/docs/react/reference/components/t) riconosce che in questo caso l'ordine delle parole nella frase deve cambiare e riorganizza di conseguenza il proprio contenuto figlio, cosa difficile da ottenere usando operatori ternari con la traduzione delle stringhe. ```jsx 我在 吃午餐。 ``` ### Conclusione Se c'è una cosa da ricordare di questo articolo, è che dovresti sempre cercare modi per sfruttare il contesto e la flessibilità nel tuo codice. Il componente [``](/docs/react/reference/components/branch) è probabilmente uno degli strumenti più semplici per farlo. Per maggiori dettagli, consulta la documentazione del [componente ``](/docs/react/reference/components/branch). ## Related questions - [Come si gestiscono i plurali in React?](https://generaltranslation.com/it/kb/how-to-handle-plurals-in-react.mdx): Non inserire la logica del plurale direttamente nel codice con controlli come n === 1. Per le app solo in inglese basta un semplice helper, ma le app multilingue richiedono regole del plurale locale-aware, che un componente i18n come `` di gt-react o gt-next gestisce per ogni lingua. - [Posso fare i18n senza file di traduzione?](https://generaltranslation.com/it/kb/i18n-without-translation-files.mdx): Sì. Con gt-react o gt-next, i contenuti restano inline nei tuoi componenti, all'interno di un componente ``, e le traduzioni vengono generate come output in fase di compilazione. Non ci sono quindi chiavi né file JSON per ogni impostazione regionale da scrivere e mantenere sincronizzati. - [General Translation, Babel e Flask-Babel a confronto: quale scegliere?](https://generaltranslation.com/it/kb/general-translation-vs-flask-babel.mdx): Babel formatta date, numeri e valute per qualsiasi impostazione regionale e gestisce i cataloghi gettext, mentre Flask-Babel lo integra con Flask, ma nessuno dei due traduce le tue stringhe. La CLI di General Translation popola i file PO di Babel per ogni lingua, forme plurali incluse, così puoi continuare a usare Flask-Babel e smettere di tradurre i cataloghi a mano. ## Previous and next questions - Previous question: [Come si gestiscono i plurali in React?](https://generaltranslation.com/it/kb/how-to-handle-plurals-in-react.mdx) - Next question: [Come si configura la SEO per un'app Next.js multilingue?](https://generaltranslation.com/it/kb/multilingual-nextjs-seo.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/it/kb/sitemap.md) for every article.