Il componente <T>

Inserisci i tuoi contenuti nel componente <T> per tradurli.

<T>This content will be translated</T>

Props

Variabili

Raccogli i valori che cambiano, come il nome o il conteggio, in v():

import { T, v } from '@magic-translate/react';

<T>
  Hello {v(user.name)}, you have {v(count)} unread messages
</T>

Magic Translate traduce il testo attorno ai valori una volta, come Hello {0}, you have {1} unread messages, e reinserisce i valori nella tua app. La traduzione è memorizzata nella cache e funziona per ogni nome e conteggio, e i valori stessi non vengono mai inviati a Magic Translate.

I valori sono numerati nell'ordine in cui appaiono. La traduzione può spostarli ovunque la lingua ne abbia bisogno, ad esempio {1} ungelesene Nachrichten für {0}.

v() può contenere anche un componente React, ad esempio un link:

<T>
  Read our {v(<Link href="/terms">terms</Link>)} before you continue.
</T>

Il testo del link non viene tradotto allora. Anche per tradurlo, inseriscilo in un <T> a sé stante: v(<Link href="/terms"><T>terms</T></Link>).

Senza v(), un valore viene tradotto insieme al testo che lo circonda. Funziona, ma ogni valore diverso è una traduzione separata che viene conteggiata ai fini del tuo utilizzo.

Limitazioni

1. Non puoi inserire componenti React all'interno del componente <T>, tranne che all'interno di v(). I semplici elementi HTML vanno bene (vedi l'esempio seguente).
2. Il contenuto all'interno di un componente <T> non può superare i 10 KB, ovvero circa 5.000 caratteri.

{/* this is OK, since <a> is a plain HTML element */}
<T>
  <a href="mailto:info@i42.ch">Please send us an email</a>
</T>

{/* this does NOT work, since <MyButton> is a React component */}
<T>
  <MyButton>Click me</MyButton>
</T>