Компонент <T>
Как локализовать JSX‑компоненты с помощью компонента <T>
Компонент <T> — основной инструмент локализации JSX‑контента в вашем приложении React. Он оборачивает JSX‑элементы и автоматически переводит их в соответствии с локалью пользователя.
Быстрый старт
Преобразуйте любой статический JSX‑контент, обернув его в <T>:
import { T } from 'gt-react';
// До
function Greeting() {
return <p>Привет, мир!</p>;
}
// После
function Greeting() {
return <T><p>Hello, world!</p></T>;
}Для динамического контента внутри <T> используйте Variable Components и Branching Components.
Базовое использование
Компонент <T> принимает любой JSX‑контент в качестве дочерних элементов:
/ / Simple text
<T>Добро пожаловать в наше приложение</T>
/ / HTML-элементы
<T><h1>Заголовок страницы</h1></T>
/ / Сложный вложенный JSX
<T>
<div className="alert">
<span>Важно:</span> Пожалуйста, внимательно прочитайте.
</div>
</T>Параметры настройки
Добавление контекста
Предоставьте контекст перевода для потенциально неоднозначных терминов:
<T context="notification popup, not bread">
Нажмите на тост, чтобы закрыть
</T>Назначение идентификаторов переводов
Используйте явные идентификаторы для единообразных переводов:
<T id="welcome-message">
С возвращением, пользователь!
</T>Когда использовать <T>
Используйте <T> только для статического контента:
// ✅ Статический контент работает
<T><button>Нажмите здесь</button></T>
<T><h1>Добро пожаловать на наш сайт</h1></T>
// ❌ Динамический контент не работает
<T><p>Здравствуйте, {username}</p></T>
<T><p>Сегодня {new Date()}</p></T>
// ✅ Для динамического контента используйте компоненты Variable
<T>
<p>Здравствуйте, <Var>{username}</Var></p>
</T>Компоненты Variable и Branching предназначены для использования внутри <T> при работе с динамическим контентом. Подробнее см. в руководствах Variable Components и Branching Components.
Примеры
Простые элементы
// Basic text
<T>Привет, мир!</T>
// Button with text
<T><Button>Отправить форму</Button></T>
// Heading with styling
<T><h1 className="text-2xl font-bold">Добро пожаловать</h1></T>Сложные компоненты
// Меню навигации
<T>
<nav className="navbar">
<a href="/about">О компании</a>
<a href="/contact">Связаться с нами</a>
</nav>
</T>
// Предупреждение
<T>
<div className="alert alert-warning">
<AlertIcon className="w-5 h-5" />
<span>Сеанс истечёт через 5 минут</span>
</div>
</T>С переменными
// Сочетание статического текста с динамическими значениями
<T>
<p>Рады видеть вас снова, <Var>{user.name}</Var>!</p>
</T>
// Форма со смешанным содержимым
<T>
<label>
Электронная почта: <input type="email" placeholder="Введите адрес электронной почты" />
</label>
</T>Подробнее о компоненте <Var> читайте в руководстве по компонентам переменных.
Настройка продакшн-среды
Процесс сборки
Добавьте перевод в ваш процесс сборки:
{
"scripts": {
"build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
}
}Поведение в разработке и в продакшене
- Разработка: С dev API‑ключом переводы выполняются по требованию при рендеринге компонентов. Вы будете видеть переводы в реальном времени по мере разработки.
- Продакшен: Все переводы заранее собираются на этапе сборки и будут доступны после запуска приложения.
Укажите свой dev API‑ключ в переменных окружения, чтобы включить живой перевод во время разработки. Создать ключ можно в Dashboard в разделе API Keys.
Конфиденциальность
Содержимое компонентов <T> отправляется в GT API для перевода. Для чувствительных данных используйте Variable Components, чтобы хранить приватную информацию локально:
// Безопасно — конфиденциальные данные остаются на устройстве
<T>
Рады видеть вас снова, <Var>{username}</Var>
</T>Распространённые проблемы
Границы компонентов
<T> переводит только своих непосредственных дочерних элементов, а не содержимое внутри других компонентов:
// ❌ Неверно: содержимое компонентов не будет переведено
function MyComponent() {
return <p>Это не будет переведено</p>;
}
<T>
<h1>Это будет переведено</h1>
<MyComponent /> {/* Содержимое внутри не будет переведено */}
</T>
// ✅ Правильно: оборачивайте каждый компонент отдельно
function MyComponent() {
return <T><p>Это будет переведено</p></T>;
}
<T><h1>Это будет переведено</h1></T>
<MyComponent />Вложенные компоненты <T>
// ❌ Не вкладывайте компоненты <T> друг в друга
<T>
<T>Привет, мир</T> {/* Так делать не следует */}
</T>Ошибки динамического контента
CLI выдаст ошибку при обнаружении динамического контента в <T>. Оберните динамические значения в компоненты Variable:
// ❌ Неверно — динамический контент перестанет работать
<T><p>Привет, {username}</p></T>
// ✅ Правильно — используйте компонент Variable
<T><p>Привет, <Var>{username}</Var></p></T>См. руководство Variable Components Guide по работе с динамическими значениями и руководство Branching Components Guide по условному контенту.
Дальнейшие шаги
- Руководство по компонентам с переменными — Работа с динамическим контентом в переводах JSX
- Руководство по ветвящимся компонентам — Добавление условной логики в переводы
Насколько полезно это руководство?