# General Translation React SDKs (gt-react, gt-next): 翻译 JSX
URL: https://generaltranslation.com/zh/docs/react/guides/translating-jsx.mdx
---
title: 翻译 JSX
description: 如何在 React、Next.js、TanStack Start 和 React Native 中使用 General Translation 的 <T> 组件原地翻译 JSX。
related:
  links:
    - /docs/react/guides/translating-strings
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/handling-plurals-and-branches
    - /docs/react/guides/translating-with-dictionaries

---

[`<T>`](/docs/react/reference/components/t) 组件会将其 JSX 子元素翻译为当前活动区域设置的内容。用源语言编写内容并用它包裹起来——General Translation 会提取文本、完成翻译，并将结果原地渲染。

该组件在所有框架中的行为都完全一致；唯一的区别是导入包不同。

## 使用 `<T>` 包裹内容 [#wrap]

将任何包含用户可见文本的 JSX 包裹在其中。嵌套的标记和元素会在翻译中保留。

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { T } from 'gt-react';

    <T>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </T>;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { T } from 'gt-next';

    <T>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </T>;
    ```

    *注意：在 Next.js 中，`<T>` 可同时用于服务端组件和客户端组件——来自 `gt-next` 的同一个导入会自动解析为服务端或客户端实现。*
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { T } from 'gt-tanstack-start';

    <T>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </T>;
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { T } from 'gt-react-native';

    <T>
      <Text>Welcome back</Text>
      <Text>Your order is on its way.</Text>
    </T>;
    ```

    *注意：在 React Native 中，应包裹原生文本节点 (如 `<Text>`) ，而不是 HTML 元素。*
  </Tab>
</Tabs>

你无需指定 key 或 id——General Translation 会根据内容识别该条目。请保持内容为静态；动态值请使用变量组件 (参见[格式化数字和日期](/docs/react/guides/formatting-variables)) 。

## 使用上下文消除歧义 [#context]

当同一段文本会因含义不同而需要不同译法时，请添加 `$context`，这样翻译人员和引擎就能区分各个条目。所有框架中的用法都一样。

```tsx
<T $context="a bank of a river">
  <span>Bank</span>
</T>;
```

## 使用 id 保持条目稳定 [#id]

传入 `$id`，可为条目指定一个稳定的标识符，这样在你编辑周围的标记时，它也不会变化。这是可选的；如果你希望为某个条目使用固定引用，请使用它。

```tsx
<T $id="home.hero.title">
  <h1>Welcome back</h1>
</T>;
```

*注意：`<T>` 内的内容必须是静态 JSX。请将条件内容或插值后的值移至 [`<Var>`](/docs/react/reference/components/var)、[`<Plural>`](/docs/react/reference/components/plural) 或 [`<Branch>`](/docs/react/reference/components/branch) 中，以确保周围文本保持可翻译。*
## Next steps

- /docs/react/guides/translating-strings
- /docs/react/guides/formatting-variables
- /docs/react/guides/handling-plurals-and-branches
- /docs/react/guides/translating-with-dictionaries