# General Translation Knowledge Base: 如何在 JSX 中翻译条件文本？
URL: https://generaltranslation.com/zh/kb/translate-conditional-jsx.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 与其分别翻译三元表达式的两个分支，不如将整句包裹在 `<T>` 组件中，并用 `<Branch>` 表达条件。这样译者能看到完整的上下文，并能根据每种语言调整句子语序。
Category: 国际化
Last updated: 2025-09-26
Authors: Ernest McCarter
Published: 2025-09-26

## Video

The video is narrated in English, with English captions.

[How do I translate conditional text in JSX?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-conditional-jsx.mp4) (46秒)

General Translation lets you wrap whole sentences in `T` and express conditions with `Branch`. Run `npx gt init`, choose Japanese and Chinese and sign in, put the sentence in a `T` component with a `Branch` so the translator sees it whole, then run `npx gt translate` to write Japanese and Chinese with the place before the verb.

## 简介

在国际化实践中，我见过的最常见错误之一，就是习惯
把简单的三元表达式拆分成多个翻译调用。
通常是这样写的：

```jsx
'use client'

import { T, useGT } from 'gt-react'

export default function ThemeSetting({ enabled }) {
  const gt = useGT()

  return (
    <>
      <span>
        <T>Dark Mode:</T>
      </span>
      <button>{enabled ? gt('On') : gt('Off')}</button>
    </>
  )
}
```

大多数情况下，这样写确实能按预期运行。在实现 i18n 之前，这段代码大概是 `{ enabled ? 'On' : 'Off' }` 这样的形式。
为了 i18n 加上 `gt()` 函数，或许只是顺着现有代码结构自然延伸的结果。

每次看到这种写法，我都会忍不住皱一下眉。这个库的设计初衷根本不是这样用的。
之所以说这是个错误 (尤其是在使用机器翻译的场景下) ，有两个理由：(1) 上下文；(2) 灵活性。

### 上下文

含义不仅蕴含在文字本身之中，也体现在文字的呈现方式上。
同样是 &quot;back&quot; 这个词，出现在返回箭头上时，与出现在脊椎按摩师的简历上时，含义很可能截然不同。
此外，如果缺少更完整的上下文，译者 (即便是人工译者) 也可能难以准确翻译这个词。
有一个广为流传的例子：WhatsApp 的 i18n 部门曾把图片编辑工具中的 &quot;crop&quot; (裁剪) 一词，误译成了德语中表示“农作物”的词。

为了解决上下文缺失的问题，我们可以借助 [`<T>`](/docs/react/reference/components/t) 和 [`<Branch>`](/docs/react/reference/components/branch) 组件，传递有关内容呈现方式的信息。
在我们的示例中，这能让“译者”更全面地理解 &quot;on&quot; 和 &quot;off&quot; 的含义。

```jsx
<T>
  <span>Dark Mode:</span>
  <button>
    <Branch branch={enabled.toString()} true="On" false="Off" />
  </button>
</T>
```

### 灵活性

除了上下文，LLM 翻译还有一个很酷的用法：利用它对代码的理解能力。
来看一个示例，其中组件的顺序会因语言而异：

```jsx
<T>
  I eat lunch at <Branch branch={atHome.toString()} true="home" false="work" />.
</T>
```

因此，可能的句子有两种：

* &quot;I eat lunch **at home**&quot;
* &quot;I eat lunch **at work**&quot;

用中文来说则是：

* &quot;我**在家**吃午餐&quot;
* &quot;我**在公司**吃午餐&quot;

[`<T>`](/docs/react/reference/components/t) 组件能够识别出此处需要调整语序，并相应地重新排列其子元素
——而在字符串翻译中借助三元运算符，就很难做到这一点。

```jsx
<T>
  我在
  <Branch branch={atHome.toString()} true="家" false="公司" />
  吃午餐。
</T>
```

### 总结

如果说本文只有一点值得记住，那就是：要时刻寻找机会，在代码中充分利用上下文并提升灵活性。
使用 [`<Branch />`](/docs/react/reference/components/branch) 组件大概是最简单的方法之一。

如需了解更多详情，请查阅 [`<Branch />` 组件](/docs/react/reference/components/branch)文档。

## Related questions

- [如何在 React 中处理复数形式？](https://generaltranslation.com/zh/kb/how-to-handle-plurals-in-react.mdx): 不要用 n === 1 这类判断硬编码复数逻辑。如果应用只支持英语，一个简单的辅助函数就够用了；但多语言应用需要符合区域设置的复数规则，而 gt-react 或 gt-next 中的 `<Plural>` 等 i18n 组件能够为每种语言处理这些规则。
- [不用翻译文件也能做 i18n 吗？](https://generaltranslation.com/zh/kb/i18n-without-translation-files.mdx): 可以。使用 gt-react 或 gt-next 时，内容以内联方式直接写在组件中的 `<T>` 组件内，译文在构建时作为输出生成，因此无需编写键，也无需为每个区域设置编写 JSON 文件并保持同步。
- [应该自建 i18n，还是使用 General Translation？](https://generaltranslation.com/zh/kb/general-translation-vs-in-house-i18n.mdx): 手写的 i18n（每种语言一个字典，外加一个简单的 t() 辅助函数）足以应对一两种语言、少量文案的场景。随着应用规模扩大，你会发现自己在重新实现复数规则、后备内容和文件同步，而且译文仍然得自己产出。General Translation 的开源库负责渲染，General Translation 则根据你的代码生成并更新译文。

## Previous and next questions

- Previous question: [如何在 React 中处理复数形式？](https://generaltranslation.com/zh/kb/how-to-handle-plurals-in-react.mdx)
- Next question: [如何为多语言 Next.js 应用设置 SEO？](https://generaltranslation.com/zh/kb/multilingual-nextjs-seo.mdx)

## Sitemap

See the [Knowledge Base sitemap](https://generaltranslation.com/zh/kb/sitemap.md) for every article.