Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI
Интеграция сервера MCP Intlayer в ваш любимый AI-ассистент позволяет получать все документы непосредственно из ChatGPT, DeepSeek, Cursor, VSCode и т.д.
Просмотр документации сервера MCPСодержимое этой страницы было переведено с помощью ИИ.
Смотреть последнюю версию оригинального контента на английскомЕсли у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.
Ссылка на документацию GitHubКопировать Markdown документа в буфер обмена
Интеграция с React: Документация по хуку useI18n
В этом разделе представлено подробное руководство по использованию хука useI18n в приложениях React, что позволяет эффективно локализовать контент.
Импортирование useI18n в React
Хук useI18n можно импортировать и интегрировать в приложения React в зависимости от контекста следующим образом:
Клиентские компоненты:
typescriptКопировать кодКопировать код в буфер обмена
import { useI18n } from "react-intlayer"; // Используйте в клиентских React-компонентах
Серверные компоненты:
Параметры
Этот хук принимает два параметра:
- namespace: Пространство имён словаря для ограничения области ключей перевода.
- locale (необязательно): Желаемая локаль. Если не указана, по умолчанию будет использоваться локаль из контекста.
Словарь
Все ключи словаря должны быть объявлены в файлах декларации контента для повышения безопасности типов и предотвращения ошибок. Инструкции по настройке можно найти здесь.
Примеры использования в React
Примеры использования хука useI18n в React-компонентах:
Копировать код в буфер обмена
import type { FC } from "react";import { ClientComponentExample, ServerComponentExample } from "@components";import { IntlayerProvider } from "react-intlayer";import { useI18n, IntlayerServerProvider } from "react-intlayer/server";import { Locales } from "intlayer";const App: FC<{ locale: Locales }> = ({ locale }) => { const t = useI18n("home-page", locale); return ( <> <p>{t("introduction")}</p> <IntlayerProvider locale={locale}> <ClientComponentExample /> </IntlayerProvider> <IntlayerServerProvider locale={locale}> <ServerComponentExample /> </IntlayerServerProvider> </> );};
Копировать код в буфер обмена
import type { FC } from "react";import { useI18n } from "react-intlayer";const ComponentExample: FC = () => { const t = useI18n("component-example"); return ( <div> <h1>{t("title")}</h1> {/* Отобразить заголовок */} <p>{t("description")}</p> {/* Отобразить описание */} </div> );};
Копировать код в буфер обмена
import { useI18n } from "react-intlayer/server";const ServerComponentExample = () => { const t = useI18n("server-component"); return ( <div> <h1>{t("title")}</h1> {/* Отобразить заголовок */} <p>{t("description")}</p> {/* Отобразить описание */} </div> );};
Обработка атрибутов
При локализации атрибутов обращайтесь к значениям перевода соответствующим образом:
Копировать код в буфер обмена
<!-- Для атрибутов доступности (например, aria-label) используйте .value, так как требуются чистые строки --><button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>
Дополнительные ресурсы
- Визуальный редактор Intlayer: Для более интуитивного управления контентом обратитесь к документации по визуальному редактору здесь.
Этот раздел специально охватывает интеграцию хука useI18n в React-приложениях, упрощая процесс локализации и обеспечивая согласованность контента между различными локалями.
История документации
- 6.0.0 - 2025-06-29: Первоначальное написание документации по хуку useI18n