# @didomi/react 中文文档

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

版本：1\.11\.0
npm 元数据更新时间：2026-08-26T08:13:52.621Z
中文译文更新时间：2026-11-12T07:31:11.503Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：62.8 kB，6 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react ^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2018-10-08T15:06:08.129Z
- 最新版本发布：2026-08-26T08:13:52.345Z
- 近 30 天下载量：274436（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：39（近 12 个月 3 个）

## 中文简介

diomi- react- test React 组件

## 安装

```sh
npm install @didomi/react
```

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

## README

# Didomi 反应

[![Didomi](https://www.didomi.io/static/assets/logo.png)](https://didomi.io/)

Didomi React 是一个 React 组件,在我们的SDK上方创建了一层.

## 安装组件

1.  使用 npm 安装库.

```sh
$ npm install --save @didomi/react
```

2.  导入您的应用程序中的模块 .

```js
import { DidomiSDK } from '@didomi/react';
```

我们建议立即 `DidomiSDK` 中. 越快将组件即时化,横幅显示得越快,或者越快与合作伙伴共享同意和显示广告.

## 创建 DidomiSDK 组件

### 以来自 Didomi 控制台( 建议) 的配置来证实组件

1.  在控制台创建和配置您的同意通知 : [https://console.didomi.io (英语)](https://console.didomi.io/)
    
2.  证明您的应用程序中的组件
    

```jsx
<DidomiSDK
  apiKey="API_KEY"
  noticeId="NOTICE_ID" // If you want to target the notice by ID and not by domain
  platform="ctv" // If you want to target a CTV notice, default value is null
  gdprAppliesGlobally={true}
  sdkPath="https://sdk.privacy-center.org/"
  embedTCFStub={true}
  embedGPPStub={false} // Set to true to embed the IAB GPP stub before loading the SDK
  country="FR" // Override the user's country (ISO 3166-1 alpha-2 code)
  region="IDF" // Override the user's region (ISO 3166-2 code)
  onReady={didomi => console.log('Didomi SDK is loaded and ready', didomi)}
  onConsentChanged={cwtToken => console.log('A consent has been given/withdrawn', cwtToken)}
  onNoticeShown={() => console.log('Didomi Notice Shown')}
  onNoticeHidden={() => console.log('Didomi Notice Hidden')}
  onNoticeBackdropclick={() => console.log('Didomi Notice Backdrop Click')}
  onNoticeClickAgree={() => console.log('Didomi Notice Click Agree')}
  onNoticeClickMoreInfo={() => console.log('Didomi Notice Click More Info')}
  onPreferencesClickAgreeToAll={() => console.log('Didomi Preferences Click Agree to All')}
  onPreferencesClickDisagreeToAll={() => console.log('Didomi Preferences Click Disagree to All')}
  onPreferencesClickPurposeAgree={purposeId => console.log('Didomi Preferences Click Purpose Agree', purposeId)}
  onPreferencesClickPurposeDisagree={purposeId => console.log('Didomi Preferences Click Purpose Disagree', purposeId)}
  onPreferencesClickViewVendors={() => console.log('Didomi Preferences Click View Vendors')}
  onPreferencesClickSaveChoices={() => console.log('Didomi Preferences Click Save Choices')}
  onPreferencesClickVendorAgree={vendorId => console.log('Didomi Preferences Click Vendor Agree', vendorId)}
  onPreferencesClickVendorDisagree={vendorId => console.log('Didomi Preferences Click Vendor Disagree', vendorId)}
  onPreferencesClickVendorSaveChoices={() => console.log('Didomi Preferences Click Vendor Save Choices')}
/>
```

Didomi SDK将自动从Didomi Console下载其配置. 通过 Didomi 控制台应用的配置修改将自动分发给您的用户,而不修改您的代码 .

该组件仅支持IAB TCF v2. 何时 `embedTCFStub` 启用后,在装入 SDK 之前自动嵌入 TCF v2 stub .

如果您的同意通知也使用 IAB GPP 框架, 您可以选择通过设置嵌入 GPP stub `embedGPPStub={true}`。GPP 根不是默认嵌入的.

### 以本地配置来证明组件

如果您喜欢,您可以通过本地配置Didomi SDK,而不是通过Didomi Console管理配置.  
通过这个设置, 修改您的配置需要您重新部署您的应用程序 .

您也可以使用本地配置来覆盖一些远程配置 。 例如,您可以自行提供通知(参见: `Customize the notice` ),同时在其余配置中仍然使用Didomi Console.

说明您的应用程序中的组件:

```jsx
const didomiConfig = {  
  app: {
    vendors: {
      iab: {
        all: true
      }
    }
  }
}

...

<DidomiSDK
  config={didomiConfig}
  noticeId="NOTICE_ID" // If you want to target the notice by ID and not by domain
  gdprAppliesGlobally={true}
  sdkPath="https://sdk.privacy-center.org/"
  embedTCFStub={true}
  onReady={didomi => console.log('Didomi SDK is loaded and ready', didomi)}
  onConsentChanged={cwtToken => console.log('A consent has been given/withdrawn', cwtToken)}
  onNoticeShown={() => console.log('Didomi Notice Shown')}
  onNoticeHidden={() => console.log('Didomi Notice Hidden')}
  onNoticeBackdropclick={() => console.log('Didomi Notice Backdrop Click')}
  onNoticeClickAgree={() => console.log('Didomi Notice Click Agree')}
  onNoticeClickMoreInfo={() => console.log('Didomi Notice Click More Info')}
  onPreferencesClickAgreeToAll={() => console.log('Didomi Preferences Click Agree to All')}
  onPreferencesClickDisagreeToAll={() => console.log('Didomi Preferences Click Disagree to All')}
  onPreferencesClickPurposeAgree={purposeId => console.log('Didomi Preferences Click Purpose Agree', purposeId)}
  onPreferencesClickPurposeDisagree={purposeId => console.log('Didomi Preferences Click Purpose Disagree', purposeId)}
  onPreferencesClickViewVendors={() => console.log('Didomi Preferences Click View Vendors')}
  onPreferencesClickSaveChoices={() => console.log('Didomi Preferences Click Save Choices')}
  onPreferencesClickVendorAgree={vendorId => console.log('Didomi Preferences Click Vendor Agree', vendorId)}
  onPreferencesClickVendorDisagree={vendorId => console.log('Didomi Preferences Click Vendor Disagree', vendorId)}
  onPreferencesClickVendorSaveChoices={() => console.log('Didomi Preferences Click Vendor Save Choices')}
/>
```

## 配置选项( 道具)

下列配置选项可作为道具传递到 `DidomiSDK` 组件 :

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 键 | 字符串 | 无效 | 您的 API 键 |
| 通知编号 | 字符串 |  | 您想要针对的远程通知的ID( 如果您没有按域选择目标) |
| 配置 | 对象 | {} | SDK 配置, 请下方查看配置对象结构 |
| 全球范围 | 布尔 | 真实 | 横幅无论位于何处,都应该向所有用户展示. 如果您是非欧盟公司, 您只需获得同意, 并向欧盟访问者显示横幅, 并可以通过将 gdprApplies Global 变量更改为上面标签中的虚假( 该变量与窗口. didomiConfig 变量分离) 来配置横幅 .  
请注意,如果您是一家设在欧盟的公司,那么您必须获得同意并向所有访客展示旗帜,无论他们来自何处. |
| sdkPath 图像 | 字符串 | https://sdk.privacey-center.org/ 互联网档案馆的存檔,存档日期2013-12-22 | 从 SDK 装入路径 。 可以在之后从自定义域装入 Didomi SDK [设置反向代理](https://developers.didomi.io/cmp/web-sdk/self-hosting)属性必须从 `http://`, (中文(简体) ), `https://`,或 `//`还必须以最后决定结束 `/`。 。 。 . |
| 嵌入式TCFStub | 布尔 | `true` | 定义装入 SDK 之前 IAB TCF 站台是否嵌入在页面上 。 如果你的许可通知使用IAB TCF,我们建议嵌入IAB TCF分机来优化与供应商的沟通. |
| 嵌入式GPPStub 软件 | 布尔 | `false` | 定义在装入 SDK 之前 IAB GPP 站台是否嵌入在页面上 。 当您的同意通知使用 IAB GPP 框架时启用此功能, 这样在 SDK 装入完成前的供应商呼叫会被排队并重放 . |
| 国家 | 字符串 | 无效 | 覆通用国. 使用一个有效的 [ISO 3166-1 α-2 标准](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) 国家代码(如"FR","US","GB"等). |
| 区域 | 字符串 | 无效 | 覆盖用户区域. 使用一个有效的 [ISO 3166-2 标准](https://en.wikipedia.org/wiki/ISO_3166-2) 区域代码(例如加利福尼亚"CA",法国"IDF"). |
| 准备 | 函数 |  | SDK装入后呼叫 通过 Didomi 对象作为参数 。 请参看https://developers.didomi.io/cmp/web-sdk/ 关于您对 Didomi 对象所能做的更多信息的参考文献 |
| 同意变更 | 函数 |  | 用户表示同意或撤回同意时打电话。 通过 CWT 图肯 作为参数 . |
| 通知显示 | 函数 |  | 当通知显示时调用 |
| 隐藏的通知 | 函数 |  | 通知被隐藏时调用 |
| 击出 | 函数 |  | 点击弹出通知的背景 |
| 关于ClickAgree的通知 | 函数 |  | 用户点击就通知达成一致时调用 |
| 关于ClickMoreInfo的通知 | 函数 |  | 用户点击在通知中学习更多信息时调用 |
| 首选项 ClickAgree Toll | 函数 |  | 用户点击后调用所有首选项 |
| 首选项 ClickDisagree To all | 函数 |  | 用户点击所有首选项出现异议时调用 |
| 首选项ClickPurposeAgree | 函数 |  | 当用户同意了首选项弹出的目的时调用. (作为参数提供目的ID) |
| 偏好点击目的偏差 | 函数 |  | 当用户不同意首选项弹出的目的时调用. (作为参数提供目的ID) |
| 关于首选项ClickViewVenders | 函数 |  | 在首选项上点击视图小贩时调用 |
| 优先选择( C) | 函数 |  | 当用户保存首选项弹出时调用 |
| 关于首选项ClickVendorAgree | 函数 |  | 当用户同意一个供应商的喜好弹出时打电话。 (作为参数提供了vendorId) |
| 首选项 ClickVendor Disagree | 函数 |  | 当用户对一个供应商的喜好有异议时,便打电话。 (作为参数提供了vendorId) |
| 首选项 ClickVendor 拯救选择 | 函数 |  | 当用户保存自己对供应商浏览的首选项弹出时调用 |

### 配置对象( 选项)

通知通常通过Didomi Console配置. 如果您选择通过配置对象管理配置,则 `config` prop允许您通过从控制台上覆盖配置且是可选的配置选项.

这是传输到 `config` 道具 (英语). 详情请访问我们 [SDK 文档](https://developers.didomi.io/cmp/web-sdk/getting-started)。 。 。 .

```js
{
  app: {
    ignoreCountry: true,
    privacyPolicyURL: 'http://example.com',
    name: 'Example',
    apiKey: '<Your API key>',
    logoUrl: 'http://logo.png',
    vendors: {
      iab: { // You either choose the option 'all', with optionaly 'exclude', or the 'include' option where you add the vendors manually
        all: true,
        exclude: [1],
        // OR
        include: [3],
      },
      didomi: ['google'],
      custom: [
        {
          id: 'custom-vendor', // Unique ID for the vendor
          name: 'Custom Vendor', // Display name of the vendor
          purposeIds: ['cookies'], // List of purposes that you want to collect consent for, for this vendor
          policyUrl: 'http://www.vendor.com/privacy-policy' // URL to the privacy policy of the vendor
        }
      ]
    },
    customPurposes: [
      {
        id: 'my_custom_purpose',
        name: {
          en: 'My custom purpose',
        },
        description: {
          en: 'Description',
        }
      }
    ]
  },
  languages: {
    enabled: ['en', 'fr', 'es', 'nl', 'ca', 'it', 'de', 'pt'], // List of languages that visitors can use
    default: 'fr', // Default language to use if the visitor uses a language that is not enabled
  },
  notice: {
    position: 'popup',
    closeOnClick: true,
    closeOnClickBackdrop: false,
    daysBeforeShowingAgain: 0,
    textAlignment: 'left',
    learnMorePosition: null,
    learnMoreMargin: '20px 0 0 0',
    logoAlignment: 'flex-start',
    content: {
      popup: {
        en: 'Text',
      },
      notice: {
        en: 'Text',
      },
      dismiss: {
        en: 'Text',
      },
      learnMore: {
        en: 'Text',
      }
    }
  },
  preferences: {
    defaultChoice: true,
    enableAllButtons: true,
    content: {
      text: {
        en: 'Text',
      },
      title: {
        en: 'Text',
      },
      disagreeToAll: {
        en: 'Text',
      },
      agreeToAll: {
        en: 'Text',
      },
      save: {
        en: 'Text',
      },
      textVendors: {
        en: 'Text'
      },
      subTextVendors: {
        en: 'Text'
      }
    },
    information: {
      enable: true,
      content: {
        text: {
          en: 'Text',
        },
        learnMore: {
          en: 'Text',
        },
        agreeAndClose: {
          en: 'Text',
        }
      }
    }
  },
  theme: {
    color: '#3F51B5', // Principal color used by the SDK
    linkColor: '#3F51B5', // Color used for the links in the notice/popup
    font: 'Arial', // Font used by the SDK
    buttons: {
      regularButtons: { // Learn more/disagree/disagree to all buttons.
        backgroundColor: '#eeeeee',
        textColor: '#999999',
        borderColor: 'rgba(34, 34, 34, 0.2)',
        borderWidth: '1px',
        borderRadius: '0px',
      },
      highlightButtons: { // Agree/save/agree to all buttons.
        backgroundColor: 'rgb(194, 39, 45)',
        textColor: '#ffffff',
        borderColor: 'rgba(194, 39, 45, 0.3)',
        borderWidth: '1px',
        borderRadius: '0px',
      }
    }
  },
  tagManager: {
    provider: 'gtm'
  },
  integrations: {
    vendors: { // Setup the integration with Google (ask Didomi to share consent with Google tags)
      google: {
        enable: true,
        eprivacy: true
      }
    },
    refreshOnConsent: true // by default, ads are reloaded after consent is given
  }
```

## 示例

```jsx
import React, { Component } from 'react'

import { DidomiSDK } from '@didomi/react'

/**
 * This is the configuration object that will set the Didomi SDK
 */
const didomiConfig = {  
  app: {
    name: 'Didomi',
    apiKey: 'API_KEY',
    vendors: {
      iab: {
        all: true,
        version: 2
      }
    }
  },
  notice: {
    position: 'bottom'
  },
  languages: {
    enabled: ['fr', 'en', 'es'],
    default: 'fr'
  }
}


class DidomiDemo extends Component {

  constructor(props) {
    super(props);
    this.didomiObject = {};
  }

  /**
   * Called once we have the callback from the SDK informing that Didoni is loaded and ready
   */
  onDidomiReady(didomi) {
    this.didomiObject = didomi;

    console.log('Didomi Ready - Is the consent required ? : ', this.didomiObject.isConsentRequired());
    console.log('Didomi Ready - Do we have the consent for the vendor IAB 1 : ', this.didomiObject.getUserConsentStatusForVendor(1));
    console.log('Didomi Ready - Do we have the consent for the vendor IAB 1 and the purpose cookies : ', this.didomiObject.getUserConsentStatus('cookies', 1));

  }

  /**
   * Called everytime the consent changes
   */
  consentHasChanged(cwtToken) {
    console.log('Didomi Consent Changed - cwtToken : ', cwtToken);
    console.log('Didomi Consent Changed - Is the consent required ? : ', this.didomiObject.isConsentRequired());
    console.log('Didomi Consent Changed - Do we have the consent for the vendor IAB 1 : ', this.didomiObject.getUserConsentStatusForVendor(1));
    console.log('Didomi Consent Changed - Do we have the consent for the vendor IAB 1 and the purpose cookies : ', this.didomiObject.getUserConsentStatus('cookies', 1));
  }

  render() {
    return <div>
      <h1>Didomi React Demo</h1>
      <DidomiSDK
        config={didomiConfig}
        gdprAppliesGlobally={true}
        onReady={this.onDidomiReady.bind(this)}
        onConsentChanged={this.consentHasChanged.bind(this)}
      />
      <button onClick={() => this.didomiObject.setUserAgreeToAll()}>Set Agree to All</button>
    </div>
  }
}
```

## 自定义通知

您可以使用自己的自定义通知来替换标准的Didomi SDK通知(banner或弹出). 此选项保留一些本土行为,如通知的位置,背景(用于弹出通知)或逻辑来决定何时显示通知.

将您的 HTML 设置在 `notice.content.html` 键 `config` 道具 :

### 自定义通知中的响应组件

如果您想要保留React的所有优点,您可以调用我们的回调函数,该函数返回通知的 HTML 元素,并在其中使自己的React 组件:

```jsx
import { render } from 'react-dom'

class NoticeHTML extends Component {
openPreferences() {
  Didomi.preferences.show()
}

render() {
  const noticeStyle = {
    color: 'red'
  }

  return (
    <div style={noticeStyle}>
      <span>Custom Notice HTML. <a onClick={this.openPreferences.bind(this)}>Open Preferences</a></span>
      {
        this.props.shouldDisplayMoreText &&
        <p>More Text</p>
      }
    </div>
  )
}
}

const didomiConfig = {
app: {
  apiKey: '<Your API key>',
  notice: {
    content: {
      html: {
        en: element => {
          render(<NoticeHTML shouldDisplayMoreText={false} />, element)
        }
      }
    }
  }
}
}

...

<DidomiSDK config={didomiConfig}/>
```

其他密钥在 `notice.content` 将被忽略.

### 自定义通知中的 HTML

您可以通过 HTML 进行所有工作 :

```js
const didomiConfig = {
app: {
  apiKey: '<Your API key>',
  notice: {
    content: {
      html: {
        en: '<div>Custom Notice</div>'
      }
    }
  }
}
}

...

<DidomiSDK config={didomiConfig}/>
```

### Didomi SDK 文档

见 [文档](https://developers.didomi.io/cmp/web-sdk)

### 许可证

此插件为 [根据BSD-3许可证发放](https://npmcn.com/package/%40didomi/react/LICENSE.md)。 。 。 .

## 常见问题

### @didomi/react 是什么？

diomi- react- test React 组件

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

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

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

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

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

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

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

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

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

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

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

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