Компонент <T>

Оберните контент в компонент <T>, чтобы перевести его.

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

Props

Переменные

Переместите изменяющиеся значения, например имя или количество, в v():

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

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

Magic Translate переводит текст вокруг значений один раз, как Hello {0}, you have {1} unread messages, и возвращает значения обратно в ваше приложение. Перевод кэшируется и работает для каждого имени и каждого числа, а сами значения никогда не отправляются в Magic Translate.

Значения нумеруются в том порядке, в котором они появляются. Перевод позволяет перемещать их туда, где они нужны языку, например {1} ungelesene Nachrichten für {0}.

v() также может содержать компонент React, например ссылку:

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

Тогда текст ссылки не переводится. Чтобы перевести её тоже, поместите её в отдельный хэштег <T>: v(<Link href="/terms"><T>terms</T></Link>).

Без v() значение переводится вместе с окружающим его текстом. Это работает, но каждое другое значение — это отдельный перевод, который учитывается при использовании.

Ограничения

1. Компоненты React нельзя помещать в компонент <T>, кроме как в v(). Обычные HTML-элементы подойдут (см. пример ниже).
2. Содержимое компонента <T> не может превышать 10 КБ, что составляет около 5000 символов.

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