Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 43 additions & 43 deletions src/content/reference/react-compiler/target.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: target

<Intro>

The `target` option specifies which React version the compiler should generate code for.
`target` 选项用于指定编译器应为哪个 React 版本生成代码。

</Intro>

Expand All @@ -18,67 +18,67 @@ The `target` option specifies which React version the compiler should generate c

---

## Reference {/*reference*/}
## 参考 {/*reference*/}

### `target` {/*target*/}

Configures the React version compatibility for the compiled output.
为编译输出配置目标 React 版本的兼容性。

#### Type {/*type*/}
#### 类型 {/*type*/}

```
'17' | '18' | '19'
```

#### Default value {/*default-value*/}
#### 默认值 {/*default-value*/}

`'19'`

#### Valid values {/*valid-values*/}
#### 有效值 {/*valid-values*/}

- **`'19'`**: Target React 19 (default). No additional runtime required.
- **`'18'`**: Target React 18. Requires `react-compiler-runtime` package.
- **`'17'`**: Target React 17. Requires `react-compiler-runtime` package.
- **`'19'`**: React 19 为目标(默认)。无需额外运行时。
- **`'18'`**: React 18 为目标。需要安装 `react-compiler-runtime` 包。
- **`'17'`**: React 17 为目标。需要安装 `react-compiler-runtime` 包。

#### Caveats {/*caveats*/}

- Always use string values, not numbers (e.g., `'17'` not `17`)
- Don't include patch versions (e.g., use `'18'` not `'18.2.0'`)
- React 19 includes built-in compiler runtime APIs
- React 17 and 18 require installing `react-compiler-runtime@rc`
#### 注意事项 {/*caveats*/}

- 始终使用字符串值,不要用数字(例如使用 `'17'` 而非 `17`)
- 不要包含补丁版本号(例如使用 `'18'` 而非 `'18.2.0'`)
- React 19 已内置编译器运行时 API
- React 17 与 18 需要安装 `react-compiler-runtime@rc`

---

## Usage {/*usage*/}
## 用法 {/*usage*/}

### Targeting React 19 (default) {/*targeting-react-19*/}
### React 19 为目标(默认) {/*targeting-react-19*/}

For React 19, no special configuration is needed:
对于 React 19,无需额外配置:

```js
{
// defaults to target: '19'
}
```

The compiler will use React 19's built-in runtime APIs:
编译器会使用 React 19 的内置运行时 API:

```js
// Compiled output uses React 19's native APIs
// 编译输出使用 React 19 的原生 API
import { c as _c } from 'react/compiler-runtime';
```

### Targeting React 17 or 18 {/*targeting-react-17-or-18*/}
### React 17 18 为目标 {/*targeting-react-17-or-18*/}

For React 17 and React 18 projects, you need two steps:
对于 React 17 React 18 项目,需要两步:

1. Install the runtime package:
1. 安装运行环境包:

```bash
npm install react-compiler-runtime@rc
```

2. Configure the target:
2. 配置 target:

```js
// For React 18
Expand All @@ -92,7 +92,7 @@ npm install react-compiler-runtime@rc
}
```

The compiler will use the polyfill runtime for both versions:
编译器会在这两个版本上使用 polyfill 运行环境:

```js
// Compiled output uses the polyfill
Expand All @@ -101,48 +101,48 @@ import { c as _c } from 'react-compiler-runtime';

---

## Troubleshooting {/*troubleshooting*/}
## 故障排除 {/*troubleshooting*/}

### Runtime errors about missing compiler runtime {/*missing-runtime*/}
### 关于缺少编译器运行环境导致的运行环境错误 {/*missing-runtime*/}

If you see errors like "Cannot find module 'react/compiler-runtime'":
如果你看到类似 “Cannot find module 'react/compiler-runtime'” 的错误:

1. Check your React version:
1. 检查你的 React 版本:
```bash
npm why react
```

2. If using React 17 or 18, install the runtime:
2. 如果使用 React 17 18,安装运行环境:
```bash
npm install react-compiler-runtime@rc
```

3. Ensure your target matches your React version:
3. 确保你的 target 和你的 React 版本一致:
```js
{
target: '18' // Must match your React major version
target: '18' // 必须与你的 React 主要版本一致
}
```

### Runtime package not working {/*runtime-not-working*/}
### 运行环境包不起作用 {/*runtime-not-working*/}

Ensure the runtime package is:
请确保运行环境包:

1. Installed in your project (not globally)
2. Listed in your `package.json` dependencies
3. The correct version (`@rc` tag)
4. Not in `devDependencies` (it's needed at runtime)
1. 安装在你的项目中(而非全局)
2. 被列在 `package.json` dependencies
3. 使用正确版本(`@rc` 标签)
4. 不在 `devDependencies` 中(运行环境需要)

### Checking compiled output {/*checking-output*/}
### 检查编译输出 {/*checking-output*/}

To verify the correct runtime is being used, note the different import (`react/compiler-runtime` for builtin, `react-compiler-runtime` standalone package for 17/18):
要验证使用的是正确的运行环境,注意导入路径的区别(React 19 使用内置的 `react/compiler-runtime`,React 17/18 使用独立包 `react-compiler-runtime`):

```js
// For React 19 (built-in runtime)
// 对于 React 19(内置运行环境)
import { c } from 'react/compiler-runtime'
// ^

// For React 17/18 (polyfill runtime)
// 对于 React 17/18polyfill 运行环境)
import { c } from 'react-compiler-runtime'
// ^
```
```