# @adhese/sdk-react 中文文档
规范地址：https://npmcn.com/package/%40adhese/sdk-react/
版本：1\.13\.2
npm 元数据更新时间：2026-11-05T12:20:54.182Z
中文译文更新时间：2026-11-06T04:34:19.476Z
软件包许可：GPL-3\.0
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40adhese/sdk-react
原文对照：https://npmcn.com/package/%40adhese/sdk-react/?lang=original
项目主页：https://github.com/adhese/sdk_typescript#readme
源码仓库：https://github.com/adhese/sdk_typescript
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：89.3 kB，27 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react \>=16\.13，react-dom \>=16\.13
- 首次发布：2024-03-22T09:47:54.552Z
- 最新版本发布：2026-11-05T12:20:53.802Z
- 近 30 天下载量：5093（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：257（近 12 个月 73 个）
## 中文简介
阿德斯 SDK
## 安装
```sh
npm install @adhese/sdk-react
```
也可以使用：`pnpm add @adhese/sdk-react`、`yarn add @adhese/sdk-react`、`bun add @adhese/sdk-react`
## README
# Adhese 反应 SDK
对于 React 开发者来说,我们提供一个 React SDK 允许您轻松地将我们的服务整合到您的 React 应用程序中.
> 反应 SDK 建在顶部 [Adhese Java 脚本 SDK](https://npmcn.com/adhese.github.com/sdk_typescript/index.html) 财务报告和审定财务报表 不需要单独安装 Adhese JavaScript SDK .
## 安装
```bash
npm install @adhese/sdk-react
```
## `AdheseProvider`
这个 `AdheseProvider` 组成部分是一个背景提供者,使Adhese实例能够提供给所有儿童组成部分. 应该放在你申请的根头 它接受一个 `options` 传递给 `createAdhese` 函数。 当 `options` 道具更改, Adhese 实例重现 。 此提供者取代 `createAdhese` 函数.
> 这个 `AdheseProvider` 组件是环绕 `createAdhese` 函数。 它必须使用 `AdheseProvider` 如果你想使用 `useAdhese` 或者说 `useAdheseSlot` 钩子.
```jsx
import { AdheseProvider } from '@adhese/sdk-react';
function Devtools() {
return (
);
}
```
## `useAdhese`
这个 `useAdhese` 钩子返回由 `AdheseProvider`它可用于访问 任何儿童部分的阿德斯实例.
```jsx
import { useAdhese } from '@adhese/sdk-react';
function YourComponent() {
const adhese = useAdhese();
// Use the adhese instance
}
```
## `useAdheseSlot`
这个 `useAdheseSlot` 钩子返回给定槽名的槽对象。 使用该选项在组件中创建槽 .
它接受以下论点:
- `elementRef`: 对应槽应附加的元素.
- `options`: 带有槽选项的对象。 此对象传递到 `adhese.addSlot` 函数.
当组件被卸载时,该槽会自动从 Adhese 实例中删除 .
```jsx
import { useAdheseSlot } from '@adhese/sdk-react';
function YourComponent() {
const elementRef = useRef(null);
const slot = useAdheseSlot(elementRef, {
format: 'your-format',
});
return (
);
}
```
## `useAdheseSlot` 与 `onBeforeRender`
类似在 [时段文档](https://npmcn.com/adhese.github.com/sdk_typescript/slots.html#hijacking-the-rendering-process),您可以使用 页:1 `onBeforeRender` 召回截取即将发布的广告。 那里的例子用香草JavaScript来写. 改为: 使用情况`jsx` 您可以使用反应 `renderToStaticMarkup` 函数可以创建静态 HTML,同时仍然具有 联合来文十.
```jsx
import { renderToStaticMarkup } from 'react-dom/server';
import { useAdheseSlot } from '@adhese/sdk-react';
function YourComponent() {
const adhese = useAdhese();
const elementRef = useRef(null);
const slot = useAdheseSlot(elementRef, {
format: 'your-format',
onBeforeRender: (ad) => {
if (typeof ad.tag !== 'object') {
// If the tag is not an object, return the ad as is
return ad;
}
return {
...ad,
tag: renderToStaticMarkup((
{ad.tag.title}
{ad.tag.description}
)),
}
},
});
return (
);
}
```
## 常见问题
### @adhese/sdk-react 是什么？
阿德斯 SDK
### 如何安装 @adhese/sdk-react？
在项目目录运行 npm install @adhese/sdk-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.13）、react-dom（\>=16\.13）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @adhese/sdk-react 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @adhese/sdk-react 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @adhese/sdk-react 可以商用吗？
@adhese/sdk-react 使用 GPL-3\.0 许可。强 Copyleft：分发包含该代码的软件时，整个作品需以 GPL-3\.0 兼容许可开源，并附带专利与反锁定条款。仅内部使用不触发此义务。以上为概括，不构成法律意见，请以许可原文为准。
### @adhese/sdk-react 的下载量有多少？
根据 npm 官方下载统计，@adhese/sdk-react 在 2026/10/05 – 2026/11/03 这 30 天内被下载 5,093 次，日均约 170 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @adhese/sdk-react 还在维护吗？
最新版本 1\.13\.2 发布于 2026/11/05（今天）；至今共发布 257 个版本，其中过去 12 个月发布了 73 个；首次发布于 2024/03/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。