# General Translation Knowledge Base: 如何翻译 React 应用？ URL: https://generaltranslation.com/zh/kb/translate-react-app.mdx Docs index: https://generaltranslation.com/llms.txt Description: 翻译 React 应用，需要先对组件进行国际化，使其以用户的语言渲染，再将每个字符串翻译成你支持的各种语言。General Translation 的 gt-react 在 `` 组件中原地翻译 JSX，npx gt translate 则会为每种语言生成一个文件。 Category: 国际化 Last updated: 2026-10-21 Authors: Kevin Liu, Kevin Wu Published: 2026-10-21 翻译 React 应用包含两项工作：一是国际化 (i18n) ，让组件以用户的语言渲染；二是将每个字符串翻译成你支持的各种语言。难点在于文本嵌在 JSX 中，与标记、变量和复数形式交织在一起，而各语言的复数规则又不尽相同 (英语有 2 种形式，阿拉伯语有 6 种) 。常见做法是将每个字符串替换为一个键，例如 `t('home.welcome')`，并为每种语言维护一个 JSON 文件，还要让它们保持同步。如果脱离周围的 UI 进行翻译，“Save”按钮在德语中可能会被译成 *sparen* (省钱) ，而不是 *speichern* (保存文件) 。 ## Video The video is narrated in English, with English captions. [How do I translate a React app?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-react-app.mp4) (48秒) General Translation lets you initialize `gt-react` before the app renders and wrap its text in `T`. List your languages in `gt.config.json` and add a `loadTranslations` file, let an entry file call `initializeGTSPA` first, wrap the page's text in ``, then sign in, set your project ID and run `npx gt translate`. ## 翻译 React 应用的几种方式 | 方案 | 擅长之处 | 需要你自行处理的部分 | | -------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | 基于键的国际化库 ([`i18next`](/kb/general-translation-vs-i18next) 搭配 `react-i18next`，或 [`react-intl`](/kb/general-translation-vs-react-intl)) | 成熟的运行时，负责渲染译文、选择复数形式和格式化值 | 将字符串替换为键、为每种语言维护一个 JSON 文件并保持同步，以及产出全部译文 | | [Lingui](/kb/general-translation-vs-lingui) | 借助 `` 宏让文案保持内联，并由 `lingui extract` 为每种语言生成一个目录 | 手动或通过已连接的服务翻译每个目录，并在文案变更时重新运行 extract 和 compile | | 翻译管理系统 ([Crowdin](/kb/general-translation-vs-crowdin)、[Lokalise](/kb/general-translation-vs-lokalise)) | 提供与代码仓库同步的网页编辑器，译者可借助截图、词汇表和翻译记忆开展工作 | 代码中的国际化库和键文件、同步的初始化设置，以及每次发布前等待译者交稿 | | General Translation (`gt-react` 和 `gt` CLI) | [``](/docs/react/reference/components/t) 原地翻译 JSX，无需键；[`npx gt translate`](/docs/cli/reference/commands/translate) 以周围的 JSX 结构作为上下文，为每种语言写入一个文件 | 用 [``](/docs/react/reference/components/t) 包裹文本；完成一次性的初始化设置 (在 `gt.config.json` 中配置语言、加载器、入口文件、登录及项目 ID) ；内容变更时 (在本地或 CI 中) 重新运行 [`npx gt translate`](/docs/cli/reference/commands/translate) | 如果应用只有少量字符串且很少变动，单独使用基于键的库、手写 JSON 文件即可。如果你希望文案保持内联，且有译者负责填充目录，可选择 Lingui；如果由本地化团队逐次手动翻译每个版本，则适合使用翻译管理系统。如果应用持续迭代，且每次发布都必须同步支持所有语言，请选择 General Translation。 ## 使用 General Translation 翻译 React 应用 借助 General Translation 开源的 `gt-react` 库和 `gt` CLI，你可以翻译 React 单页应用 (SPA) ，例如 Vite 或 webpack 项目。`npx gt@latest` 初始化设置向导可以自动为你配置 Vite 入口和翻译加载 (该步骤尚处于实验阶段) 。如需手动设置： 1. 安装 `gt-react` 和 `gt` CLI。 2. 在 `gt.config.json` 中列出你要支持的语言。 3. 添加 [`loadTranslations`](/docs/react/reference/functions/load-translations) 函数，并在一个简短的入口文件中调用 [`initializeGTSPA`](/docs/react/reference/config#initialize-spa)，确保译文在应用渲染前加载完成。 4. 用 [``](/docs/react/reference/components/t) 组件包裹你的文本： ```tsx title="src/components/Welcome.tsx" import { T } from 'gt-react'; export default function Welcome() { return (

Welcome to my app

This content will be translated automatically.
); } ``` 5. 使用 [`npx gt login`](/docs/cli/reference/commands/login) 登录，并设置你的项目 ID。 6. 运行 [`npx gt translate`](/docs/cli/reference/commands/translate)，为每种语言生成一个翻译文件。 通过 [``](/docs/react/reference/components/t) 的 `context` 属性，可以消除多义词 (例如“Save”) 的歧义；仪表板中的词汇表和自定义提示词则能确保术语和语气保持一致。[服务器端渲染的 React](/docs/react/react-quickstart)、[React Router 框架](/docs/react/react-router-quickstart)和 [Next.js](/docs/react/nextjs-quickstart) (使用 `gt-next`) 应用均有各自的快速入门；如果是 SPA，请参阅 [React SPA 快速入门](/docs/react/react-spa-quickstart)了解完整步骤。 ## Related questions - [如何为 Next.js App Router 应用添加 i18n？](https://generaltranslation.com/zh/kb/add-i18n-to-nextjs.mdx): 首先在受支持的 App Router 项目中运行 gt init 来配置 General Translation，然后标记源内容、生成译文并验证语言切换。gt-next 将文案与翻译上下文一同保留在 JSX 中；CLI、仪表板编辑器和 Locadex 负责生成、审阅和持续更新。本指南还演示了如何显式配置本地文件。 - [如何翻译 React Native 应用？](https://generaltranslation.com/zh/kb/translate-react-native-app.mdx): 在组件中标记文本，为每种语言生成一个翻译文件，添加 Intl 兼容性补丁，然后根据设备语言加载对应的文件。使用 General Translation 实验性的 gt-react-native 时，只需用 `` 包裹文本，Babel 插件会自动添加 polyfills，npx gt translate 则负责生成翻译文件。 - [不使用翻译文件能实现 i18n 吗？](https://generaltranslation.com/zh/kb/i18n-without-translation-files.mdx): 可以。借助 General Translation 的 gt-react 和 gt-next 库，你可以为 React 和 Next.js 实现 i18n，既无需翻译键，也不用为每种语言维护 JSON 文件。文案以内联方式写在 JSX 的 `` 组件中，gt translate 命令会在构建时结合代码中的上下文，为每种语言生成译文。Locadex 还能通过拉取请求让译文保持最新。 - [如何翻译 JSX 之外的字符串？](https://generaltranslation.com/zh/kb/translate-strings-outside-jsx.mdx): 对于每个不属于 JSX 子节点的字符串（例如占位符或模块作用域常量），应在其渲染的位置通过翻译函数处理。General Translation 的 useGT 钩子会返回该函数，而 msg 搭配 useMessages 可以翻译在组件外部定义的常量。 - [如何在 React 中处理复数形式？](https://generaltranslation.com/zh/kb/how-to-handle-plurals-in-react.mdx): 在 React 中处理复数形式时，应为每种语言的每个复数形式各准备一个句子，并按该语言的复数规则选出对应句子——英语有 2 种形式，俄语有 4 种，阿拉伯语有 6 种。gt-react 和 gt-next 提供的 General Translation `` 组件只需接收你的源语言形式，General Translation 便会生成每种目标语言所需的形式。 ## Previous and next questions - Previous question: [如何翻译 React Native 应用？](https://generaltranslation.com/zh/kb/translate-react-native-app.mdx) - Next question: [如何翻译 Vue 应用？](https://generaltranslation.com/zh/kb/translate-vue-app.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/zh/kb/sitemap.md) for every article.