# @ctrl/react-adsense 中文文档

规范地址：https://npmcn.com/package/%40ctrl/react-adsense/

版本：3\.0\.0
npm 元数据更新时间：2026-10-27T02:40:37.639Z
中文译文更新时间：2026-11-11T03:51:19.849Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40ctrl/react-adsense
原文对照：https://npmcn.com/package/%40ctrl/react-adsense/?lang=original
项目主页：https://react-adsense.xmplaylist.com/
源码仓库：https://github.com/scttcper/react-adsense

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

- 包体积（解压后）：11.7 kB，7 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=19\.3，react-dom \>=19\.3
- 首次发布：2020-06-07T21:34:27.808Z
- 最新版本发布：2026-10-27T02:40:36.976Z
- 近 30 天下载量：19572（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：24（近 12 个月 1 个）

## 中文简介

Google AdSense 的反应组件

## 安装

```sh
npm install @ctrl/react-adsense
```

也可以使用：`pnpm add @ctrl/react-adsense`、`yarn add @ctrl/react-adsense`、`bun add @ctrl/react-adsense`

## README

# @ctrl/反应 -adsense [![npm](https://badgen.net/npm/v/@ctrl/react-adsense)](https://www.npmjs.com/package/@ctrl/react-adsense)

> Google AdSense 的反应组件

戴莫: [https://react-adsense.xmplaylist.com (中文(简体) )](https://react-adsense.xmplaylist.com/)

### 安装

```console
npm install @ctrl/react-adsense
```

需要回放19.3或更新.

### 使用

在您的 HTML 中装入 AdSense 脚本一次 `<head>` 和你一样 [通常会](https://support.google.com/adsense/answer/7477845) 或任何位于你反应树的地方。 将同步脚本切入 `<head>` 只装了一次.

```tsx
<script
  async
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
  crossOrigin="anonymous"
/>
```

```tsx
import { Adsense } from '@ctrl/react-adsense';

// ads with no set-up
<Adsense
  client="ca-pub-7640562161899788"
  slot="7259870550"
/>

// ads with a fixed size
<Adsense
  client="ca-pub-7640562161899788"
  slot="7259870550"
  style={{ display: 'inline-block', width: 300, height: 250 }}
  format=""
/>

// responsive and native ads
<Adsense
  client="ca-pub-7640562161899788"
  slot="7259870550"
  style={{ textAlign: 'center' }}
  layout="in-article"
  format="fluid"
/>
```

### 道具

| Prop | 设定 | 默认 |
| --- | --- | --- |
| `client` | `data-ad-client` |  |
| `slot` | `data-ad-slot` |  |
| `layout` | `data-ad-layout` |  |
| `layoutKey` | `data-ad-layout-key` |  |
| `format` | `data-ad-format` | `'auto'` |
| `responsive` | `data-full-width-responsive` | `'false'` |
| `adTest` | `data-adtest` |  |
| `pageLevelAds` | 推动 `enable_page_level_ads` 客户端 | `false` |

`style` 合并 `{ display: 'block' }`. 其他一切(`className`, (中文(简体) ), `id`, (中文(简体) ), `ref`, (中文(简体) ), `data-*`,......)被传递给 `<ins>`。 。 。 .

### 服务器渲染

与服务器渲染(Next.js, TanStack Start, React Router,.)和React Server组件相关的工作,不需要包装. 软件包是标记的 `'use client'`,广告本身只使用 React 的 [`browser()`](https://react.dev/reference/react-dom/browser)。 。 。 .

-   服务器发送空 `<ins>` 还有你的 `className` 财务报告和审定财务报表 `style`。给它一个大小,所以当广告装入时,页面不会移动,比如 `style={{ minHeight: 280 }}` 一个响应性广告.
-   水分后浏览器在真实中互换 `<ins class="adsbygoogle">` 并请求广告。 AdSense不能填补一个槽 React还没有被水分化,这曾经引起水分化错误.
-   服务器渲染器通过 `onBrowserBailout`没有 `onError`,因此不会出现错误.

```tsx
// app/page.tsx, a server component
import { Adsense } from '@ctrl/react-adsense';

export default function Page() {
  return <Adsense client="ca-pub-7640562161899788" slot="7259870550" style={{ minHeight: 280 }} />;
}
```

### 单页应用程序

每个 `<Adsense>` 要求AdSense在上架时发布一个广告,改变道具不会装入另一个道具. 给它 `key` 当您想要新的广告时, 就像现在的路由一样, 就会改变.

```tsx
<Adsense key={pathname} client="ca-pub-7640562161899788" slot="7259870550" />
```

## 常见问题

### @ctrl/react-adsense 是什么？

Google AdSense 的反应组件

### 如何安装 @ctrl/react-adsense？

在项目目录运行 npm install @ctrl/react-adsense，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=19\.3）、react-dom（\>=19\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ctrl/react-adsense 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ctrl/react-adsense 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ctrl/react-adsense 可以商用吗？

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

### @ctrl/react-adsense 的下载量有多少？

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

### @ctrl/react-adsense 还在维护吗？

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