# General Translation Knowledge Base: Как перевести строки вне JSX? URL: https://generaltranslation.com/ru/kb/translate-strings-outside-jsx.mdx Docs index: https://generaltranslation.com/llms.txt Description: Пропускайте каждую строку, которая не является дочерним элементом JSX (например, плейсхолдер или константу в области видимости модуля), через функцию перевода в том месте, где выполняется её рендеринг. Такую функцию возвращает хук useGT от General Translation, а msg вместе с useMessages переводит константы, определённые вне компонента. Category: Интернационализация Last updated: 2026-10-21 Authors: Kevin Liu, Kevin Wu Published: 2026-10-21 Строки вне JSX — это текст, который не является дочерним элементом JSX, а значит, компонент перевода не может его обернуть. Сюда относятся значения атрибутов, например `placeholder` и `aria-label`, строки, формируемые в коде, и константы, объявленные в области видимости модуля. Каждая такая строка проходит через функцию перевода, которую возвращает хук (например, `useTranslation` в `react-i18next`), а хуки работают только внутри компонента. Константа в области видимости модуля вычисляется один раз — при загрузке файла, поэтому, если перевести её там, она навсегда останется на том языке, который был активен в тот момент (а на сервере — на одном языке для всех пользователей). Поэтому в константе хранится лишь ссылка, а сама строка переводится там, где выполняется её рендеринг. ## Video The video is narrated in English, with English captions. [How do I translate strings outside JSX?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-strings-outside-jsx.mp4) (49 с) General Translation translates placeholders with `useGT` and constants with `msg` and `useMessages`. Call `useGT` and pass the placeholder to the function it returns, await `getGT` in async components, register each constant string with `msg` and resolve it with `useMessages`, then run `npx gt translate`. ## Способы перевода строк вне JSX | Подход | Сильные стороны | В коде | Что остаётся на вас | | --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [`i18next`](/kb/general-translation-vs-i18next) (`react-i18next`) или `next-intl` | Зрелые среды выполнения с функцией перевода для любой строки | [`t`](https://www.i18next.com/overview/api#t) из [`useTranslation`](https://react.i18next.com/latest/usetranslation-hook) или [`useTranslations`](https://next-intl.dev/docs/environments/server-client-components) принимает ключ; ключ хранится в константе и переводится при рендеринге | Придумывать ключ для каждой строки, вести отдельный файл для каждого языка и синхронизировать все файлы при изменении текстов | | [`react-intl`](/kb/general-translation-vs-react-intl) | Дескрипторы сообщений содержат ID, сообщение по умолчанию и описание для переводчиков | `defineMessages` объявляет дескрипторы в константе, а [`formatMessage`](https://formatjs.github.io/docs/react-intl/api#formatmessage) из [`useIntl`](https://formatjs.github.io/docs/react-intl/api#useintl-hook) переводит нужный дескриптор при рендеринге | ID для каждого сообщения, извлечение сообщений в отдельный файл для каждого языка и подготовка всех переводов | | [Lingui](/kb/general-translation-vs-lingui) | Сообщением служит сам исходный текст, поэтому придумывать ключи не нужно | Макрос [`msg`](https://lingui.dev/ref/macro#definemessage) определяет сообщение в константе, а `_` из [`useLingui`](https://lingui.dev/ref/react) переводит его при рендеринге | Запуск `lingui extract` и `lingui compile` и перевод каждого каталога | | General Translation (`gt-react` и `gt-next`) | [`npx gt translate`](/docs/cli/reference/commands/translate) находит все строки в коде и переводит их до сборки для рабочей среды | [`useGT`](/docs/react/reference/hooks/use-gt) возвращает функцию, которую вы вызываете с исходной строкой (без ключа); [`msg`](/docs/react/reference/functions/msg) регистрирует каждую строку в константе, а [`useMessages`](/docs/react/reference/hooks/use-messages) переводит её при рендеринге | Передавать каждую строку литералом, чтобы CLI мог её найти, и заново запускать [`npx gt translate`](/docs/cli/reference/commands/translate) при изменении текстов | Выбирайте `i18next` или `next-intl`, если в приложении уже есть файлы с ключами и переводчик поддерживает их в актуальном состоянии. Выбирайте `react-intl` или Lingui, если переводчики работают с извлечёнными каталогами и им нужно описание или исходный текст к каждому сообщению. Выбирайте General Translation, если строки разбросаны по компонентам и общим константам и меняются с каждым релизом. Если константа используется только в одном компоненте, достаточно перенести её внутрь: каждое значение станет обычным вызовом функции перевода. ## Перевод строк вне JSX с помощью General Translation В `gt-react` и `gt-next` от General Translation строка внутри компонента переводится с помощью хука [`useGT`](/docs/react/reference/hooks/use-gt), а константа — с помощью [`msg`](/docs/react/reference/functions/msg) и [`useMessages`](/docs/react/reference/hooks/use-messages). 1. Для строки внутри компонента вызовите `const gt = useGT()` — он возвращает саму функцию перевода — и передайте ей строковый литерал, указав переменные как именованные заполнители: `gt('Welcome back, {name}!', { name: user.name })`. Чтобы неоднозначное слово переводилось в нужном значении, добавьте `$context`. 2. Для константы зарегистрируйте каждую строку с помощью [`msg`](/docs/react/reference/functions/msg) и разрешите её через [`useMessages`](/docs/react/reference/hooks/use-messages) там, где она рендерится: ```tsx import { msg, useMessages } from 'gt-react'; const STATUS = { active: msg('Active'), paused: msg('Paused') }; function Badge({ status }: { status: 'active' | 'paused' }) { const m = useMessages(); return {m(STATUS[status])}; } ``` 3. Перед сборкой для рабочей среды выполните [`npx gt translate`](/docs/cli/reference/commands/translate). ## Серверные компоненты и область видимости модуля Асинхронные компоненты Next.js App Router не могут вызывать хуки, поэтому в них используются [`getGT`](/docs/react/nextjs/reference/functions/get-gt) и [`getMessages`](/docs/react/nextjs/reference/functions/get-messages) из `gt-next/server` с `await`. В client-side приложении на `gt-react`, настроенном через [`initializeGTSPA`](/docs/react/reference/config#initialize-spa), функция [`t`](/docs/react/reference/functions/t-function) работает и в области видимости модуля, но для смены языка требуется полная перезагрузка страницы. Пошаговые инструкции для каждого фреймворка приведены в руководстве [Перевод строк](/docs/react/guides/translating-strings). ## Related questions - [Как перевести условный текст в JSX?](https://generaltranslation.com/ru/kb/translate-conditional-jsx.mdx): Не разбивайте предложение и переводите каждый его вариант целиком, ведь тернарный оператор дробит его на фрагменты, которые теряют смысл и своё место в порядке слов каждого языка. В General Translation для этого используется `` внутри ``, который переводит предложение как единое целое. - [Как форматировать числа, даты и валюты для каждой локали?](https://generaltranslation.com/ru/kb/format-numbers-dates-currencies.mdx): Форматируйте каждое значение при рендеринге страницы с учётом локали читателя с помощью JavaScript Intl API и не включайте его в переводимое предложение. Компоненты General Translation ``, ``, `` и `` делают и то и другое внутри ``, поэтому один перевод подходит для любого значения. - [Как перевести React-приложение?](https://generaltranslation.com/ru/kb/translate-react-app.mdx): Перевод React-приложения состоит из двух этапов — интернационализации компонентов, чтобы они отображались на языке пользователя, и перевода каждой строки на все поддерживаемые языки. gt-react от General Translation переводит JSX на месте в компоненте ``, а npx gt translate создаёт по одному файлу на каждый язык. - [Можно ли делать i18n без файлов перевода?](https://generaltranslation.com/ru/kb/i18n-without-translation-files.mdx): Да. Библиотеки gt-react и gt-next от General Translation обеспечивают i18n для React и Next.js без ключей перевода и без отдельного JSON-файла для каждого языка, который приходится поддерживать. Тексты остаются встроенными в JSX внутри компонента ``, а команда gt translate генерирует переводы для каждого языка во время сборки, учитывая контекст из вашего кода. Locadex может поддерживать их в актуальном состоянии через пул-реквесты. ## Previous and next questions - Previous question: [Как перевести сайт документации на Mintlify?](https://generaltranslation.com/ru/kb/translate-mintlify-docs.mdx) - Next question: [Как поддерживать переводы в актуальном состоянии при каждом развёртывании?](https://generaltranslation.com/ru/kb/translations-in-ci.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/ru/kb/sitemap.md) for every article.