# gt-react: General Translation React SDK: 编译器
URL: https://generaltranslation.com/zh/docs/react/concepts/compiler.mdx
---
title: 编译器
description: gt CLI 如何在构建时处理你的 React 源文件
---

`gt` CLI 内置了一个编译器，会在构建时分析你的 React 源文件。它能检测出常见的翻译错误，还可以选择自动用翻译组件包装 JSX。

## 功能

### 动态内容检测

检测翻译组件中未包裹的动态内容：

```jsx
// ❌ 无效 - 动态内容未包裹
<T>Hello {userName}</T>

// ✅ 有效 - 动态内容已包裹在变量组件中  
<T>Hello <Var>{userName}</Var></T>
```


### 函数调用校验

检测传给翻译函数的非字面量参数：

```jsx
const gt = useGT();

// ❌ 无效 - 模板字面量和字符串拼接
gt(`Hello ${name}`)
gt("Hello " + name)

// ✅ 有效 - 带变量替换的字符串字面量
gt("Hello, {name}!", { name })
```


## 自动 JSX 注入

启用自动 JSX 注入后，编译器会自动用翻译组件包裹可翻译的 JSX 文本，因此你不必再为每段文本手动添加 `<T>` 组件。

### 启用自动 JSX 注入

将 `enableAutoJsxInjection` 添加到 `gt.config.json` 中：

```json title="gt.config.json"
{
  "files": {
    "gt": {
      "output": "public/_gt/[locale].json",
      "parsingFlags": {
        "enableAutoJsxInjection": true
      }
    }
  }
}
```


### 注入前后对比

如果不使用自动 JSX 注入，你需要手动包裹文本：

```jsx
import { T } from 'gt-react';

function Welcome() {
  return (
    <T>
      <h1>Welcome to our app</h1>
    </T>
  );
}
```

启用自动 JSX 注入后，你只需编写普通的 JSX，剩下的交给编译器处理：

```jsx
function Welcome() {
  return <h1>Welcome to our app</h1>;
}
```

编译器会检测可翻译的文本，并在你运行 `npx gt translate` 时自动将其包裹。


### 编译器会保留的内容

* **用户编写的 `<T>` 组件**会原样保留——编译器不会重复包裹你的代码
* **其他 GT 组件**，如 `<Var>`、`<Branch>`、`<Plural>` 和 `<Derive>`，也会被原样保留
* **字符串属性** (例如 `placeholder`、`alt`) 不会受影响——只有 JSX 子元素会被包裹
* **非文本内容** (如数字和布尔值) 会被忽略