Die <T>-Komponente

Binde deinen Inhalt in die Komponente <T> ein, um ihn zu übersetzen.

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

Props

Variablen

Schließ Werte, die sich ändern, wie ein Name oder eine Anzahl, in v() ein:

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

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

Magic Translate übersetzt den Text rund um die Werte einmal, als Hello {0}, you have {1} unread messages, und fügt die Werte wieder in deine App ein. Die Übersetzung ist zwischengespeichert und funktioniert für jeden Namen und jede Anzahl, und die Werte selbst werden niemals an Magic Translate gesendet.

Die Werte sind in der Reihenfolge nummeriert, in der sie erscheinen. Die Übersetzung kann sie überall hin bewegen, wo die Sprache sie braucht, zum Beispiel {1} ungelesene Nachrichten für {0}.

v() kann auch eine React-Komponente enthalten, wie zum Beispiel einen Link:

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

Der Linktext ist dann nicht übersetzt. Um es auch zu übersetzen, füge es in ein eigenes <T> ein: v(<Link href="/terms"><T>terms</T></Link>).

Ohne v() wird ein Wert zusammen mit dem Text um ihn herum übersetzt. Das funktioniert, aber jeder andere Wert ist eine separate Übersetzung, die auf deine Nutzung angerechnet wird.

Einschränkungen

1. Du kannst keine React-Komponenten in die <T>-Komponente einfügen, außer in v(). Einfache HTML-Elemente sind in Ordnung (siehe das Beispiel unten).
2. Der Inhalt einer <T>-Komponente darf 10 KB nicht überschreiten, was etwa 5.000 Zeichen entspricht.

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