Dokumentacja

Komponent <T>

Owiń zawartość w komponencie <T>, aby ją przetłumaczyć.

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

Props

PropTypOpis
formality'informal' | 'formal'Ustawia formalność tłumaczenia.
idstringUmożli wia samodzielną edycję tego użycia tekstu.
langLanguageZastępuje język ustawiony na MagicTranslateProvider.

Zmienne

Zmieniające się wartości, takie jak nazwa lub liczba, zawiń w v():

import { T, v } from '@magic-translate/react';
<T>
Hello {v(user.name)}, you have {v(count)} unread messages
</T>

Magic Translate tłumaczy tekst wokół wartości raz, jako Hello {0}, you have {1} unread messages, i ponownie umieszcza wartości w aplikacji. Tłumaczenie jest przechowywane w pamięci podręcznej i działa dla każdego imienia i każdej liczby, a same wartości nigdy nie są wysyłane do Magic Translate.

Wartości są ponumerowane w kolejności, w jakiej się pojawiają. Tłumaczenie może przenosić je wszędzie tam, gdzie ich potrzebuje język, na przykład {1} ungelesene Nachrichten für {0}.

v() może również zawierać komponent React, taki jak link:

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

Tekst linku nie jest wtedy tłumaczony. Aby to również przetłumaczyć, umieść go we własnym <T>: v(<Link href="/terms"><T>terms</T></Link>).

Bez v() wartość jest tłumaczona wraz z tekstem wokół niej. To działa, ale każda inna wartość jest oddzielnym tłumaczeniem, które liczy się do Twojego użycia.

Ograniczenia

  1. Składników React nie można umieścić wewnątrz składnika <T>, z wyjątkiem v(). Zwykłe elementy HTML są w porządku (patrz przykład poniżej).
  2. Zawartość w składniku <T> nie może przekraczać 10 KB, czyli około 5000 znaków.
{/* 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>