总览

介绍

General Translation React SDK 是一款面向 React 应用的开源国际化（i18n）库。

它提供了完善的工具集，帮助你以简洁、可维护的方式为 React 应用实现国际化，并在功能上与其他主流 i18n 库保持一致。

该 SDK 可在不依赖 General Translation 平台的情况下独立使用，行为与其他 i18n 库相似。

此外，它也可以与我们的平台集成以获得增强能力：

开发环境中的翻译热重载
自动化 AI 翻译
与 General Translation 平台双向同步翻译
与我们的翻译 CDN（内容分发网络）的原生集成

概念

理解该 SDK 的 5 个核心概念：

<GTProvider> 组件

<T> 组件

useGT 钩子

用于共享字符串的 msg 函数

（可选）useTranslations 钩子

`<GTProvider>` 组件

<GTProvider> 组件为你的应用提供翻译上下文，其中包含当前语言及相关译文。

import { GTProvider } from 'gt-react';

function App() {
  return (
    <GTProvider>
      <div>
        {/* 你的应用程序内容 */}
      </div>
    </GTProvider>
  );
}

重要： 应将 Provider 包裹整个应用，并尽可能放在组件树的最高层，例如根部的 App 组件。

更多信息请参阅 GTProvider API 参考。

`<T>` 组件

<T> 组件是在应用中实现内容翻译的推荐方式。

它是一个 React 组件，可用于包裹任意 JSX 元素，并会自动将该元素的内容渲染为受支持的语言。

我们建议尽可能使用 <T> 组件，因为它为翻译提供了最大的灵活性。

与纯字符串不同，<T> 组件可用于翻译 HTML 内容，因此比字符串翻译更强大。

示例

<T>
  <div>你好,世界!</div>
</T>

<T>
  <div>
    <h1> 这是一张图片 </h1>
    <img src="https://example.com/image.png" alt="示例" />
  </div>
</T>

<T>
  使用 `<T>` 组件可以轻松完成格式化。
  <Num>{1000}</Num>
  <DateTime>{new Date()}</DateTime>
  <Currency currency="USD">{1000}</Currency>
</T>

<T> 组件可与变量组件（如 <Num>、<DateTime> 和 <Currency>）配合使用，用于动态内容格式化。

参阅《<T> 组件指南》，了解使用 <T> 组件的多种方式。

`useGT` 钩子

useGT 是一个 React 钩子，其用法与 <T> 组件类似，但在取舍上有所不同。

该钩子会返回一个用于 translate 字符串的函数。

const t = useGT();

t('你好，世界！');

与<T>组件相比，useGT钩子在代码中提供了更大的灵活性。

例如，如果你的数据结构较为复杂且包含嵌套字符串，使用<T>组件会更不便。

const t = useGT();
const data = {
  title: t('你好,世界!'),
  description: t('这是一段描述'),
};

参阅字符串指南，了解更多有关useGT Hook 的信息。

`msg` 函数

msg 函数用于标记需要翻译的字符串，这些字符串可能在多个组件中复用，或存放在配置对象中。

这对共享内容尤其有用，例如导航标签、表单提示，或应用中在多个位置出现的任意文本。

// 标记需要翻译的字符串
import { msg } from 'gt-react';

const navItems = [
  { label: msg('首页'), href: '/' },
  { label: msg('关于'), href: '/about' },
  { label: msg('联系'), href: '/contact' }
];

// 解码并使用已标记的字符串
import { useMessages } from 'gt-react';

function Navigation() {
  const m = useMessages();
  
  return (
    <nav>
      {navItems.map(item => (
        <a key={item.href} href={item.href}>
          {m(item.label)}
        </a>
      ))}
    </nav>
  );
}

函数 msg 会为字符串添加翻译元数据，而 useMessages 则负责解码。

对于需要在整个应用中保持一致翻译的共享内容，请使用 msg。对于组件特定的内容，优先使用 <T> 或 useGT。

请参阅共享字符串指南，了解更多关于 msg 函数的内容。

`useTranslations` 钩子

useTranslations 是一个 React 钩子，它返回一个函数，用于根据给定的键获取对应的翻译。

dictionary.ts

const dictionary = {
  hello: {
    world: '你好，世界！',
  },
};

App.tsx

const translate = useTranslations();
translate('hello.world');

此行为与其他翻译库类似，例如 react-i18next 和 next-intl。

我们不建议在你的应用中使用 useTranslations 钩子。频繁使用 useTranslations 钩子会使代码库更难维护，并导致大量技术债。

我们建议改用 <T> 组件或 useGT 钩子。

如果你正从其他 i18n 库迁移，useTranslations 钩子可作为即插即用的替代方案，便于按增量方式迁移你的代码库。

请参阅 dictionaries 指南，进一步了解 useTranslations 钩子。

更多信息请参阅 useTranslations API 参考。

后续步骤

了解如何使用 SDK 配置 React 项目：快速入门
了解如何使用 <T> 组件翻译 JSX 内容：JSX 翻译指南
了解如何使用 useGT 钩子翻译字符串：字符串翻译指南
了解如何使用 msg 函数处理共享字符串：共享字符串指南

介绍

General Translation React SDK 是一款面向 React 应用的开源国际化（i18n）库。

它提供了完善的工具集，帮助你以简洁、可维护的方式为 React 应用实现国际化，并在功能上与其他主流 i18n 库保持一致。

该 SDK 可在不依赖 General Translation 平台的情况下独立使用，行为与其他 i18n 库相似。

此外，它也可以与我们的平台集成以获得增强能力：

开发环境中的翻译热重载
自动化 AI 翻译
与 General Translation 平台双向同步翻译
与我们的翻译 CDN（内容分发网络）的原生集成

概念

理解该 SDK 的 5 个核心概念：

<GTProvider> 组件

<T> 组件

useGT 钩子

用于共享字符串的 msg 函数

（可选）useTranslations 钩子

`<GTProvider>` 组件

<GTProvider> 组件为你的应用提供翻译上下文，其中包含当前语言及相关译文。

import { GTProvider } from 'gt-react';

function App() {
  return (
    <GTProvider>
      <div>
        {/* 你的应用程序内容 */}
      </div>
    </GTProvider>
  );
}

重要： 应将 Provider 包裹整个应用，并尽可能放在组件树的最高层，例如根部的 App 组件。

更多信息请参阅 GTProvider API 参考。

`<T>` 组件

<T> 组件是在应用中实现内容翻译的推荐方式。

它是一个 React 组件，可用于包裹任意 JSX 元素，并会自动将该元素的内容渲染为受支持的语言。

我们建议尽可能使用 <T> 组件，因为它为翻译提供了最大的灵活性。

与纯字符串不同，<T> 组件可用于翻译 HTML 内容，因此比字符串翻译更强大。

示例

<T>
  <div>你好,世界!</div>
</T>

<T>
  <div>
    <h1> 这是一张图片 </h1>
    <img src="https://example.com/image.png" alt="示例" />
  </div>
</T>

<T>
  使用 `<T>` 组件可以轻松完成格式化。
  <Num>{1000}</Num>
  <DateTime>{new Date()}</DateTime>
  <Currency currency="USD">{1000}</Currency>
</T>

<T> 组件可与变量组件（如 <Num>、<DateTime> 和 <Currency>）配合使用，用于动态内容格式化。

参阅《<T> 组件指南》，了解使用 <T> 组件的多种方式。

`useGT` 钩子

useGT 是一个 React 钩子，其用法与 <T> 组件类似，但在取舍上有所不同。

该钩子会返回一个用于 translate 字符串的函数。

const t = useGT();

t('你好，世界！');

与<T>组件相比，useGT钩子在代码中提供了更大的灵活性。

例如，如果你的数据结构较为复杂且包含嵌套字符串，使用<T>组件会更不便。

const t = useGT();
const data = {
  title: t('你好,世界!'),
  description: t('这是一段描述'),
};

参阅字符串指南，了解更多有关useGT Hook 的信息。

`msg` 函数

msg 函数用于标记需要翻译的字符串，这些字符串可能在多个组件中复用，或存放在配置对象中。

这对共享内容尤其有用，例如导航标签、表单提示，或应用中在多个位置出现的任意文本。

// 标记需要翻译的字符串
import { msg } from 'gt-react';

const navItems = [
  { label: msg('首页'), href: '/' },
  { label: msg('关于'), href: '/about' },
  { label: msg('联系'), href: '/contact' }
];

// 解码并使用已标记的字符串
import { useMessages } from 'gt-react';

function Navigation() {
  const m = useMessages();
  
  return (
    <nav>
      {navItems.map(item => (
        <a key={item.href} href={item.href}>
          {m(item.label)}
        </a>
      ))}
    </nav>
  );
}

函数 msg 会为字符串添加翻译元数据，而 useMessages 则负责解码。

对于需要在整个应用中保持一致翻译的共享内容，请使用 msg。对于组件特定的内容，优先使用 <T> 或 useGT。

请参阅共享字符串指南，了解更多关于 msg 函数的内容。

`useTranslations` 钩子

useTranslations 是一个 React 钩子，它返回一个函数，用于根据给定的键获取对应的翻译。

dictionary.ts

const dictionary = {
  hello: {
    world: '你好，世界！',
  },
};

App.tsx

const translate = useTranslations();
translate('hello.world');

此行为与其他翻译库类似，例如 react-i18next 和 next-intl。

我们不建议在你的应用中使用 useTranslations 钩子。频繁使用 useTranslations 钩子会使代码库更难维护，并导致大量技术债。

我们建议改用 <T> 组件或 useGT 钩子。

如果你正从其他 i18n 库迁移，useTranslations 钩子可作为即插即用的替代方案，便于按增量方式迁移你的代码库。

请参阅 dictionaries 指南，进一步了解 useTranslations 钩子。

更多信息请参阅 useTranslations API 参考。

后续步骤

了解如何使用 SDK 配置 React 项目：快速入门
了解如何使用 <T> 组件翻译 JSX 内容：JSX 翻译指南
了解如何使用 useGT 钩子翻译字符串：字符串翻译指南
了解如何使用 msg 函数处理共享字符串：共享字符串指南

介绍

General Translation React SDK 是一款面向 React 应用的开源国际化（i18n）库。

它提供了完善的工具集，帮助你以简洁、可维护的方式为 React 应用实现国际化，并在功能上与其他主流 i18n 库保持一致。

该 SDK 可在不依赖 General Translation 平台的情况下独立使用，行为与其他 i18n 库相似。

此外，它也可以与我们的平台集成以获得增强能力：

开发环境中的翻译热重载
自动化 AI 翻译
与 General Translation 平台双向同步翻译
与我们的翻译 CDN（内容分发网络）的原生集成

概念

理解该 SDK 的 5 个核心概念：

<GTProvider> 组件

<T> 组件

useGT 钩子

用于共享字符串的 msg 函数

（可选）useTranslations 钩子

`<GTProvider>` 组件

<GTProvider> 组件为你的应用提供翻译上下文，其中包含当前语言及相关译文。

import { GTProvider } from 'gt-react';

function App() {
  return (
    <GTProvider>
      <div>
        {/* 你的应用程序内容 */}
      </div>
    </GTProvider>
  );
}

重要： 应将 Provider 包裹整个应用，并尽可能放在组件树的最高层，例如根部的 App 组件。

更多信息请参阅 GTProvider API 参考。

`<T>` 组件

<T> 组件是在应用中实现内容翻译的推荐方式。

它是一个 React 组件，可用于包裹任意 JSX 元素，并会自动将该元素的内容渲染为受支持的语言。

我们建议尽可能使用 <T> 组件，因为它为翻译提供了最大的灵活性。

与纯字符串不同，<T> 组件可用于翻译 HTML 内容，因此比字符串翻译更强大。

示例

<T>
  <div>你好,世界!</div>
</T>

<T>
  <div>
    <h1> 这是一张图片 </h1>
    <img src="https://example.com/image.png" alt="示例" />
  </div>
</T>

<T>
  使用 `<T>` 组件可以轻松完成格式化。
  <Num>{1000}</Num>
  <DateTime>{new Date()}</DateTime>
  <Currency currency="USD">{1000}</Currency>
</T>

<T> 组件可与变量组件（如 <Num>、<DateTime> 和 <Currency>）配合使用，用于动态内容格式化。

参阅《<T> 组件指南》，了解使用 <T> 组件的多种方式。

`useGT` 钩子

useGT 是一个 React 钩子，其用法与 <T> 组件类似，但在取舍上有所不同。

该钩子会返回一个用于 translate 字符串的函数。

const t = useGT();

t('你好，世界！');

与<T>组件相比，useGT钩子在代码中提供了更大的灵活性。

例如，如果你的数据结构较为复杂且包含嵌套字符串，使用<T>组件会更不便。

const t = useGT();
const data = {
  title: t('你好,世界!'),
  description: t('这是一段描述'),
};

参阅字符串指南，了解更多有关useGT Hook 的信息。

`msg` 函数

msg 函数用于标记需要翻译的字符串，这些字符串可能在多个组件中复用，或存放在配置对象中。

这对共享内容尤其有用，例如导航标签、表单提示，或应用中在多个位置出现的任意文本。

// 标记需要翻译的字符串
import { msg } from 'gt-react';

const navItems = [
  { label: msg('首页'), href: '/' },
  { label: msg('关于'), href: '/about' },
  { label: msg('联系'), href: '/contact' }
];

// 解码并使用已标记的字符串
import { useMessages } from 'gt-react';

function Navigation() {
  const m = useMessages();
  
  return (
    <nav>
      {navItems.map(item => (
        <a key={item.href} href={item.href}>
          {m(item.label)}
        </a>
      ))}
    </nav>
  );
}

函数 msg 会为字符串添加翻译元数据，而 useMessages 则负责解码。

对于需要在整个应用中保持一致翻译的共享内容，请使用 msg。对于组件特定的内容，优先使用 <T> 或 useGT。

请参阅共享字符串指南，了解更多关于 msg 函数的内容。

`useTranslations` 钩子

useTranslations 是一个 React 钩子，它返回一个函数，用于根据给定的键获取对应的翻译。

dictionary.ts

const dictionary = {
  hello: {
    world: '你好，世界！',
  },
};

App.tsx

const translate = useTranslations();
translate('hello.world');

此行为与其他翻译库类似，例如 react-i18next 和 next-intl。

我们不建议在你的应用中使用 useTranslations 钩子。频繁使用 useTranslations 钩子会使代码库更难维护，并导致大量技术债。

我们建议改用 <T> 组件或 useGT 钩子。

如果你正从其他 i18n 库迁移，useTranslations 钩子可作为即插即用的替代方案，便于按增量方式迁移你的代码库。

请参阅 dictionaries 指南，进一步了解 useTranslations 钩子。

更多信息请参阅 useTranslations API 参考。

后续步骤

了解如何使用 SDK 配置 React 项目：快速入门
了解如何使用 <T> 组件翻译 JSX 内容：JSX 翻译指南
了解如何使用 useGT 钩子翻译字符串：字符串翻译指南
了解如何使用 msg 函数处理共享字符串：共享字符串指南

总览

介绍

概念

`<GTProvider>` 组件

`<T>` 组件

示例

`useGT` 钩子

`msg` 函数

`useTranslations` 钩子

后续步骤

本页目录

总览

介绍

概念

`<GTProvider>` 组件

`<T>` 组件

示例

`useGT` 钩子

`msg` 函数

`useTranslations` 钩子

后续步骤

本页目录

总览

介绍

概念

`<GTProvider>` 组件

`<T>` 组件

示例

`useGT` 钩子

`msg` 函数

`useTranslations` 钩子

后续步骤

本页目录

在 GitHub 上加星标

在 GitHub 上加星标

总览

本页目录

总览

本页目录

总览

本页目录

GitHub在 GitHub 上加星标

GitHub在 GitHub 上加星标

在 GitHub 上加星标

在 GitHub 上加星标