概览
General Translation 的 React SDK 概述
介绍
General Translation React SDK 是一款用于 React 应用的开源国际化（i18n）库。
它提供了一整套完善的工具，帮助你以简单、易维护的方式为 React 应用实现国际化，并与其他主流 i18n 库在功能上保持一致。
该 SDK 可在不依赖 General Translation 平台的情况下独立使用，行为与其他 i18n 库相近。
同时，它也可与我们的平台深度集成，解锁增强功能：
- 开发环境中的翻译热重载
- 自动化 AI 翻译
- 与 General Translation 平台的翻译同步
- 与我们的翻译 CDN 的原生集成
概念
要掌握该 SDK，需要了解 5 个核心概念。
<GTProvider> 组件
<GTProvider> 组件为你的应用提供翻译上下文，包括当前语言以及相应的翻译内容。
import { GTProvider } from 'gt-react';
function App() {
return (
<GTProvider>
<div>
{/* 您的应用内容 */}
</div>
</GTProvider>
);
}重要： 应将 Provider 包裹整个应用，并尽可能放在组件树的最高层级，例如放在根 App 组件中。
参见 GTProvider 的 API 参考，了解更多信息。
<T> 组件
<T> 组件是为你的应用内容进行翻译的推荐方式。
它是一个 React 组件，可用于包裹任意 JSX 元素，并会自动将该元素的内容渲染为受支持的语言。
示例
<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>，用于格式化动态内容。
useGT 钩子
useGT 是一个 React 钩子，其用法与 <T> 组件相似，但各有取舍。
该钩子会返回一个用于翻译字符串的函数。
const t = useGT();
t('你好，世界！');与<T>组件相比，useGT钩子在代码中提供了更高的灵活性。
例如，如果你有一个包含嵌套字符串的复杂数据结构，使用<T>组件会更不便。
const t = useGT();
const data = {
title: t('你好，世界！'),
description: t('这是一个描述'),
};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 函数的内容。
useTranslations 钩子
useTranslations 是一个 React 钩子，返回一个函数，用于按给定键获取对应的翻译。
const dictionary = {
hello: {
world: '你好，世界！',
},
};const translate = useTranslations();
translate('hello.world');这种行为与其他翻译库类似，例如 react-i18next 和 next-intl。
我们不建议在您的应用程序中使用 useTranslations hook。频繁使用 useTranslations hook 会使您的代码库更难维护，并会产生大量技术债务。
如果您正在从其他 i18n 库迁移，useTranslations hook 是一个直接替换方案，可用于增量迁移您的代码库。
查看 dictionaries 指南以了解更多关于 useTranslations hook 的信息。
查看 useTranslations API 参考 获取更多信息。
后续步骤
这份指南怎么样？