Обзор

Компонент <T> — основной способ перевода в gt-next.

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

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

Справка

Свойства

Описание

Возвращает

React.JSX.Element | undefined — отрисованный перевод или запасной контент в соответствии с указанной конфигурацией.

Поведение

Продакшен

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

После генерации переводы либо (1) сохраняются в CDN, либо (2) включаются в сборочный артефакт вашего приложения — в зависимости от конфигурации. Затем переведенный контент отдается пользователям. Если перевод не найден, будет показан исходный контент.

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

Разработка

Во время разработки функция <T> будет переводить контент по требованию. Это полезно для прототипирования того, как ваше приложение будет выглядеть на разных языках. Не забудьте добавить Dev API key в переменные окружения, чтобы включить это поведение.

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

В режиме разработки вы заметите задержку при переводе по требованию. Этой задержки не будет в production-сборках, если только контент не переводится по требованию явно, то есть при использовании <Tx> или tx.

Примеры

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

<T> переведёт своё содержимое.

import { T } from 'gt-next';

export default function Greeting() {
    return (
        <T>
            Привет, мир!
        </T>
    );
}

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

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

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

export default function DynamicGreeting(user) {
    return (
        <T>
            Здравствуйте, <Var>{user.name}</Var>!
        </T>
    );
}

Работа с множественным числом

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

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

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

Ограничения

Компонент <T> не переводит динамический содержимый контент.

import { T } from 'gt-next';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} {/* приведёт к ошибке */}
        </T>
    );
}

Функция <T> переводит свои дочерние узлы.

import { T } from 'gt-next';

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

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

export default function Example() {
    return (
        <T>
            <div><b>Это корректно!</b></div> {/* будет переведено */}

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

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

Примечания

• Компонент <T> предназначен для перевода содержимого в вашем приложении. Это основной способ локализации в gt-next.
• Используйте компонент <T> для перевода простого текста или JSX‑структур, включая переменные и множественное число.
• Если вы используете компонент <T> на клиенте, убедитесь, что он обёрнут в <GTProvider>, чтобы получить доступ к контексту перевода.

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

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