# @astrojs/react 中文文档

规范地址：https://npmcn.com/package/%40astrojs/react/

版本：7\.1\.4
npm 元数据更新时间：2026-11-05T19:58:24.936Z
中文译文更新时间：2026-11-07T01:09:35.478Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40astrojs/react
原文对照：https://npmcn.com/package/%40astrojs/react/?lang=original
项目主页：https://docs.astro.build/en/guides/integrations-guide/react/
源码仓库：https://github.com/withastro/astro

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：40.9 kB，29 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>=22\.23\.4
- 运行依赖：5 个
- peer 依赖：react ^17\.0\.2 \|\| ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^17\.0\.2 \|\| ^18\.0\.0 \|\| ^19\.0\.0，@types/react ^17\.0\.50 \|\| ^18\.0\.21 \|\| ^19\.0\.0，@types/react-dom ^17\.0\.17 \|\| ^18\.0\.6 \|\| ^19\.0\.0，oxc-transform-react ^0\.145\.0
- 首次发布：2022-03-18T23:24:46.410Z
- 最新版本发布：2026-11-05T19:58:24.583Z
- 近 30 天下载量：10956531（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：171（近 12 个月 30 个）

## 中文简介

Astro 内部使用反应组件

## 安装

```sh
npm install @astrojs/react
```

也可以使用：`pnpm add @astrojs/react`、`yarn add @astrojs/react`、`bun add @astrojs/react`

## README

# @astrojs/反应 @ @ @ info

这个 **[Astro 集成系统](https://docs.astro.build/en/guides/integrations/)** 允许服务器侧渲染和客户端水合 [反应](https://react.dev/) 组件.

## 文档

读取 [`@astrojs/react` 文档](https://docs.astro.build/en/guides/integrations-guide/react/)

## React 编译器

安装可选 Oxc 编译器 :

```sh
pnpm add -D oxc-transform-react
```

启用于 `astro.config.mjs`数字 :

```js
import react from '@astrojs/react';
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [react({ compiler: true })],
});
```

编译器会自动记忆客户端组件和钩子. 它不编译服务器渲染 。 目标默认为您安装的 React 主版本 。 对于反应 17 或 18, 也安装 `react-compiler-runtime` 作为运行时间依赖.

传递一个选项对象, 例如 `compiler: { compilationMode: 'annotation' }`,用于配置 Oxc 的 React 编译器。 整合 `include` 财务报告和审定财务报表 `exclude` 过滤器适用;不包含依赖性和Astro文件. 汇编默认被禁用 .

## 移动自定义 Babel 转换

整合用途 `@vitejs/plugin-react` v6和Oxc为JSX和快刷新. 这个 `babel` 在这个主要版本中取消了整合选项.

如果您使用自定义 Babel 转换, 请安装 `@rolldown/plugin-babel` 财务报告和审定财务报表 `@babel/core`,保留您现有的 Babel 插件和预设 :

```sh
pnpm add -D @rolldown/plugin-babel @babel/core
```

移动您的 Babel 插件和预设 `react({ babel: ... })` 改为 `babel()` 内 `vite.plugins`例如,使用 `babel-plugin-styled-components` 从:

```js
import react from '@astrojs/react';
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [react({ babel: { plugins: ['babel-plugin-styled-components'] } })],
});
```

改为:

```js
import react from '@astrojs/react';
import babel from '@rolldown/plugin-babel';
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [react()],
  vite: {
    plugins: [
      babel({
        plugins: ['babel-plugin-styled-components'],
      }),
    ],
  },
});
```

这也与 `react({ compiler: true })`. Babel在Oxc转换TypeScript和JSX之前运行. Babel 插件可以自动解析 `.jsx`, (中文(简体) ), `.ts`,以及 `.tsx` 文档。 没有装入 `babel.config.js` 或者说 `.babelrc` 文件; 将选项直接传给 `babel()`旧的 `babel` 不支持召回;使用插件的 [`overrides` 和预设的钩子](https://github.com/rolldown/plugins/tree/main/packages/babel#options) 用于有条件的转换.

不启用 `babel-plugin-react-compiler` 在与Oxc编译器相同的组件上.

## 支助

-   帮帮忙 [Astro Discord (Astro Discord) 时尚主题 :](https://astro.build/chat/)。在我们 `#support` 论坛,或者参观我们的 `#dev` 频道讨论当前发展及更多!
    
-   检查我们 [Astro 集成文档](https://docs.astro.build/en/guides/integrations/) 更多关于融合.
    
-   提交错误报告和特性请求为 [GitHub 问题](https://github.com/withastro/astro/issues)。 。 。 .
    

## 捐款

这个包由Astro的核心团队维护. 欢迎你提交一个问题或公关! 这些链接会帮助您启动 :

-   [贡献者手册](https://github.com/withastro/astro/blob/main/CONTRIBUTING.md)
-   [行为守则](https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md)
-   [社区指南](https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md)

## 许可证

麻省理工学院

版权(c)2023年至今 [天体](https://astro.build/)

## 常见问题

### @astrojs/react 是什么？

Astro 内部使用反应组件

### 如何安装 @astrojs/react？

在项目目录运行 npm install @astrojs/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^17\.0\.2 \|\| ^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^17\.0\.2 \|\| ^18\.0\.0 \|\| ^19\.0\.0）、@types/react（^17\.0\.50 \|\| ^18\.0\.21 \|\| ^19\.0\.0）、@types/react-dom（^17\.0\.17 \|\| ^18\.0\.6 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @astrojs/react 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/astrojs\_\_react 是否存在。

### @astrojs/react 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @astrojs/react 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.23\.4。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @astrojs/react 可以商用吗？

@astrojs/react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @astrojs/react 的下载量有多少？

根据 npm 官方下载统计，@astrojs/react 在 2026/10/07 – 2026/11/05 这 30 天内被下载 10,956,531 次，日均约 365,218 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @astrojs/react 还在维护吗？

最新版本 7\.1\.4 发布于 2026/11/06（2 天前）；至今共发布 171 个版本，其中过去 12 个月发布了 30 个；首次发布于 2022/03/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。