El componente <T>

Incluye tu contenido en el componente <T> para traducirlo.

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

Props

Variables

Coloca los valores que cambian, como un nombre o un recuento, en v():

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

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

Magic Translate traduce el texto alrededor de los valores una vez, como Hello {0}, you have {1} unread messages, y vuelve a poner los valores en tu aplicación. La traducción está en caché y funciona para todos los nombres y todos los recuentos, y los valores en sí mismos nunca se envían a Magic Translate.

Los valores están numerados en el orden en que aparecen. La traducción puede llevarlos a donde el idioma los necesite, por ejemplo, {1} ungelesene Nachrichten für {0}.

v() también puede contener un componente de React, como un enlace:

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

El texto del enlace no está traducido entonces. Para traducirlo también, ponlo en un <T> propio: v(<Link href="/terms"><T>terms</T></Link>).

Sin v(), un valor se traduce junto con el texto que lo rodea. Eso funciona, pero cada valor diferente es una traducción independiente que cuenta para tu uso.

Limitaciones

1. No puedes poner los componentes de React dentro del componente <T>, excepto dentro del v(). Los elementos HTML simples están bien (consulta el siguiente ejemplo).
2. El contenido de un componente <T> no puede superar los 10 KB, es decir, unos 5000 caracteres.

{/* 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>