# @carlos\.algms/react-gpt 中文文档

规范地址：https://npmcn.com/package/%40carlos.algms/react-gpt/

版本：2\.2\.2
npm 元数据更新时间：2024-10-11T13:58:20.529Z
中文译文更新时间：2026-11-09T04:45:40.798Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40carlos.algms/react-gpt
原文对照：https://npmcn.com/package/%40carlos.algms/react-gpt/?lang=original
项目主页：https://github.com/nfl/react-gpt#readme
源码仓库：https://github.com/nfl/react-gpt

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

- 包体积（解压后）：400 kB，39 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：6 个
- peer 依赖：prop-types ^15\.5\.10，react ^15\.0\.1 \|\| ^16\.0\.0，react-dom ^15\.0\.1 \|\| ^16\.0\.0
- 首次发布：2019-04-05T09:24:09.064Z
- 最新版本发布：2024-10-11T13:58:20.367Z
- 近 30 天下载量：13036（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 0 个）

## 中文简介

使用 Google 发布器标签的反应显示广告组件

## 安装

```sh
npm install @carlos.algms/react-gpt
```

也可以使用：`pnpm add @carlos.algms/react-gpt`、`yarn add @carlos.algms/react-gpt`、`bun add @carlos.algms/react-gpt`

## README

![](http://static.nfl.com/static/content/public/static/img/logos/nfl-engineering-light.svg)

# 反应 GBT

[![npm Version](https://img.shields.io/npm/v/react-gpt.svg?style=flat-square)](https://www.npmjs.org/package/react-gpt) [![Build Status](https://img.shields.io/travis/nfl/react-gpt/master.svg?style=flat-square)](https://travis-ci.org/nfl/react-gpt) [![Dependency Status](https://img.shields.io/david/nfl/react-gpt.svg?style=flat-square)](https://david-dm.org/nfl/react-gpt) [![codecov.io](https://img.shields.io/codecov/c/github/nfl/react-gpt/master.svg?style=flat-square)](https://codecov.io/github/nfl/react-gpt?branch=master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://npmcn.com/package/%40carlos.algms/react-gpt/CONTRIBUTING.md#pull-requests)

A 类 [反应](https://github.com/facebook/react) 构成部分 [谷歌出版商标签](https://developers.google.com/doubleclick-gpt/?hl=en)。 。 。 .

## 所需资源

-   反应0.14+

## 浏览器要求

-   IE10 + 数据

## 特征

-   支持所有渲染模式(单一请求模式,async渲染节点和 \*sync渲染模式)
-   支持响应性广告.
-   支持互通广告.
-   支持懒惰的改造.

\*同步渲染需要同步加载GPT JavaScript.

## 安装

```
$ yarn react-gpt
```

反射 GBT 取决于 [答应](https://promisesaplus.com/) 用于浏览器。 如果您的应用程序支持不支持承诺的浏览器, 请包括多填充 .

## 开始

导入回放GPT并传递道具到组件.

```js
import {Bling as GPT} from "react-gpt";

class Application extends React.Component {
    render() {
        return (
            <GPT
                adUnitPath="/4595/nfl.test.open"
                slotSize={[728, 90]}
            />
        );
    }
}
```

你至少需要通过 `adUnitPath` 和其中一个 `slotSize` 财务报告和审定财务报表 `sizeMapping`。 。 。 .

#### 启用单一请求模式

启用 [单一请求模式](https://support.google.com/dfp_sb/answer/181071?hl=en)电话 `Bling.enableSingleRequest()` 在做广告之前. 默认为 `Asynchronous Rendering Mode` 如果没有设置.

```js
import {Bling as GPT} from "react-gpt";

GPT.enableSingleRequest();

class Application extends React.Component {
    render() {
        return (
            <div id="ad-1">
                <GPT
                    adUnitPath="/4595/nfl.test.open"
                    slotSize={[728, 90]}
                />
            </div>
            <div id="ad-2">
                <GPT
                    adUnitPath="/4595/nfl.test.open"
                    slotSize={[300, 250]}
                />
            </div>
        );
    }
}
```

上述例子将向服务器发出一个请求,以制作两个广告,从而更容易确保排除类别.

#### 响应性广告

如果你通过了 `sizeMapping` 代替道具 `slotSize`, React GPT 为取景口宽度的改变而收听,并在中断点被击中时刷新广告.

```js
import {Bling as GPT} from "react-gpt";

class Application extends React.Component {
    render() {
        return (
            <GPT
                adUnitPath="/4595/nfl.test.open"
                sizeMapping={[
                    {viewport: [0, 0], slot: [320, 50]},
                    {viewport: [750, 0], slot: [728, 90]},
                    {viewport: [1050, 0], slot: [1024, 120]}
                ]}
            />
        );
    }
}
```

## API 和文档

-   [API 密码](https://npmcn.com/docs/api/) 评议 `React GPT` API 密码
-   [开始](https://npmcn.com/docs/GettingStarted.md) 更详细的“启动指南”
-   [文档](https://npmcn.com/docs/) 向导与API.

## 举例来说:

1.  克隆这个还原
2.  运行 `yarn`
3.  运行 `npm run examples` 用于客户端渲染, `npm start` 用于服务器侧渲染.
4.  将浏览器指向 http://localhost: 8080

## 协助这一项目

请稍等一下 [提交文件的准则](https://npmcn.com/package/%40carlos.algms/react-gpt/CONTRIBUTING.md)。 。 。 .

-   [调取请求](https://npmcn.com/package/%40carlos.algms/react-gpt/CONTRIBUTING.md#pull-requests)
-   [发展进程](https://npmcn.com/package/%40carlos.algms/react-gpt/CONTRIBUTING.md#development)

## 许可证

麻省理工学院

## 常见问题

### @carlos\.algms/react-gpt 是什么？

使用 Google 发布器标签的反应显示广告组件

### 如何安装 @carlos\.algms/react-gpt？

在项目目录运行 npm install @carlos\.algms/react-gpt，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：prop-types（^15\.5\.10）、react（^15\.0\.1 \|\| ^16\.0\.0）、react-dom（^15\.0\.1 \|\| ^16\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @carlos\.algms/react-gpt 支持 TypeScript 吗？

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

### @carlos\.algms/react-gpt 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @carlos\.algms/react-gpt 可以商用吗？

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

### @carlos\.algms/react-gpt 的下载量有多少？

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

### @carlos\.algms/react-gpt 还在维护吗？

最新版本 2\.2\.2 发布于 2024/10/11（2 年前）；至今共发布 5 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/04/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。