Обзор

Компонент <Tx> переводит JSX‑контент во время выполнения.

<Tx>
    Сегодня я пошёл
    {" в магазин"}
    <p>
        чтобы <b>купить</b> немного <i>продуктов</i>.
    </p>
</Tx> 

Компонент <Tx> поддерживает перевод как простого текста, так и сложных структур JSX. Кроме того, он предоставляет инструменты для работы с переменными, формами множественного числа и контекстно-зависимыми переводами. <Tx> работает только на стороне сервера.

Справочные материалы

Свойства

Описания

Поведение

<Tx> переводит JSX во время выполнения. Это означает, что переводы выполняются на лету, поэтому вы можете переводить контент, который известен только в рантайме. Компромисс в том, что при ожидании загрузки перевода по запросу возникает задержка, и такой подход заметно медленнее.

Во время загрузки <Tx> вернёт undefined, за исключением случаев, когда языки близки (en-US и en-GB), хотя это поведение можно настроить параметрами рендера. Если возникает ошибка, <Tx> вернёт исходный контент.

Мы советуем переводить всё, что возможно, на этапе сборки с помощью <T>, getGT или useGT, а переводы по запросу — такие как <Tx> и tx — использовать только при необходимости.

Обязательно следуйте руководству по развёртыванию.

Примеры

Базовое использование

Компонент <Tx> переводит своих дочерних элементов во время выполнения.

import { Tx } from 'gt-next';

export default function Greeting() {
    return (
        <Tx id="greeting">
            Здравствуй, мир!
        </Tx> 
    );
}

С переменными

Вы можете использовать компонент <Var>, чтобы пометить дочерние элементы как переменные. Так вы укажете содержимое, которое не должно переводиться.

import { Tx, Var } from 'gt-next';

export default function DynamicGreeting(user) {
    return (
        <Tx>
            Привет, <Var>{user.name}</Var>
        </Tx>
    );
}

С поддержкой множественного числа

Компонент <T> также поддерживает работу с формами множественного числа через компонент <Plural>.

import { Tx, Plural } from 'gt-next';

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  
                singular={<>У вас есть предмет.</>}  
                plural={<>У вас есть предметы.</>}  
            />  
        </Tx>
    );
}

Ограничения

Функция <Tx> переводит только свои дочерние элементы.

import { Tx } from 'gt-next';

const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);

const InvalidTranslation = ({ children }) => (<div><b>Нет перевода</b></div>);

export default function Example() {
    return (
        <Tx>
            <div><b>Это допустимо!</b></div> // будет переведено 

            <ValidTranslation> // будет переведено 
                Привет, мир!
            </ValidTranslation>

            <InvalidTranslation /> // переведено не будет
        </Tx>
    );
}

Примечания

• Компонент <Tx> предназначен для перевода содержимого вашего приложения во время выполнения.
• Используйте <Tx> для перевода простого текста и JSX‑структур, включая переменные и множественное число.

Следующие шаги

• Для переводов на этапе сборки ознакомьтесь с компонентом <T>.
• За более продвинутыми возможностями обратитесь к справочнику по <T>.
• Для перевода строк см. tx, getGT и useGT.