Komponent <T>
Owiń zawartość w komponencie <T>, aby ją przetłumaczyć.
<T>This content will be translated</T>
Props
| Prop | Typ | Opis |
|---|---|---|
formality | 'informal' | 'formal' | Ustawia formalność tłumaczenia. |
id | string | Umożli wia samodzielną edycję tego użycia tekstu. |
lang | Language | Zastę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
- Składników React nie można umieścić wewnątrz składnika
<T>, z wyjątkiemv(). Zwykłe elementy HTML są w porządku (patrz przykład poniżej). - 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>