Обзор

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

<T id="example"> // [!code highlight]
    Сегодня я ходил
    {" в магазин"}
    <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-сборках её не будет, так как всё уже будет переведено.

Примеры

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

Компонент <T> может переводить простые строки с помощью id и своих дочерних элементов. Помните: компонент <T> нужно использовать внутри <GTProvider>, чтобы получить доступ к переводам.

import { T } from 'gt-react';

export default function Greeting() {
    return (
        <T id="greeting"> // [!code highlight]
            Привет, мир!
        </T> 
    );
}

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

Компонент <T> может использовать переменные для динамического контента в переводах.

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

export default function DynamicGreeting(user) {
    return (
        <T id="greeting">
            Привет, <Var>{user.name}</Var>! // [!code highlight]
        </T>
    );
}

С множественным числом

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

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

export default function ItemCount({ count }) {
    return (
        <T id="item_count">
            <Plural n={count}  
                singular={<>У вас один элемент.</>}  
                plural={<>У вас несколько элементов.</>}  
            />  // [!code highlight]
        </T>
    );
}

Ограничения

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

import { T } from 'gt-react';

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

Функция <T> переводит вложенные элементы.

import { T } from 'gt-react';

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

const InvalidTranslation = ({ children }) => (<div><b>No translation</b></div>);

export default function Example() {
    return (
        <T>
            <div><b>This is valid!</b></div> // будет переведено // [!code highlight]

            <ValidTranslation> // будет переведено // [!code highlight]
                Hello, world! // [!code highlight]
            </ValidTranslation> // [!code highlight]

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

Примечания

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

Дальнейшие шаги

• Ознакомьтесь с более продвинутыми возможностями — перевод по запросу, переменные, контекст и обработка множественного числа — в документации по <T> Design Patterns.
• Для перевода строк используйте useGT.