# @domainkit/react 中文文档

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

版本：0\.23\.0
npm 元数据更新时间：2026-11-03T08:49:49.466Z
中文译文更新时间：2026-11-12T16:34:25.163Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：306 kB，7 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=24\.10\.0
- 运行依赖：1 个
- peer 依赖：react \>=19\.0\.0 \<20\.0\.0，effect \>=4\.1\.2 \<5\.0\.0，react-dom \>=19\.0\.0 \<20\.0\.0
- 首次发布：2026-08-30T12:04:34.706Z
- 最新版本发布：2026-11-03T08:49:49.148Z
- 近 30 天下载量：2561（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：30（近 12 个月 30 个）

## 中文简介

自定义域设置的无头反应钩子

## 安装

```sh
npm install @domainkit/react
```

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

## README

# @ domainkit/ 反应

用于自定义域设置的无头反应钩子,通过您服务器拥有的传输. 包裹 供应说明、复制和可访问性;您的应用程序提供标记。 供应商证书 永远不能到达浏览器 .

联合国 [域名- kit.dev](https://domain-kit.dev/)

## 安装

```sh
npm install @domainkit/react domainkit effect react react-dom
```

需要反应19。 安装 `domainkit` 财务报告和审定财务报表 `@domainkit/react` 在同一个发行版本.

对于有样式的构成,请将来自 DomainKit 注册的流加入您的阴影包 :

```sh
npx shadcn@latest add https://domain-kit.dev/r/domain-flow.json
```

## 一个钩子

```tsx
"use client";

import { DnsRecord } from "domainkit";
import { Transport } from "domainkit/client";
import { Domain, DomainKit } from "@domainkit/react";

const transport = Transport.fromFetch("/api/domainkit");

const requirements = [
  DnsRecord.cname({ name: "app.example.com", target: "edge.acme.dev", purpose: "Serve your site" }),
  DnsRecord.txt({
    name: "_acme.app.example.com",
    value: "acme-verify=7f3a",
    purpose: "Prove ownership",
  }),
];

function DomainSetup() {
  const flow = Domain.useFlow({ domain: "app.example.com", requirements });
  return <DomainFlowCard flow={flow} />;
}

export function DomainSettings() {
  return (
    <DomainKit.Root transport={transport}>
      <DomainSetup />
    </DomainKit.Root>
  );
}
```

`Domain.useFlow` 连接一个提供者,规划 DNS 更改,取得客户的批准或 拒绝,适用计划,遵守记录,并根据申请收据清理记录。 这个 返回四个控制器、计划行报告、最新准备状态、能力组 运输申报,a `FlowState` 你自己的表面读取.

![The domain setup lifecycle: connect, review, approve, apply, keep a receipt, check DNS, and separately approve cleanup.](https://domain-kit.dev/launch/lifecycle-1920x1080.png)

`Transport.fromFetch` 在您所搭载的路线上的点数 `domainkit/server`。将其写入 JSX没事: `DomainKit.Root` 将运输器的身份保存在整个挂载上,所以控制器 不要在每次渲染时重启。 过 `revision` 以在更改后重新检查每个挂载域 乌伊没有做到.

一个交互式提供者将客户返回到他们开始的页面. 过 `returnTo` 改为名称 不同的目的地,或 `null` 离开服务器的 `defaultReturnTo` 负责.

## 回调恢复

`Connect.useRecovery()` 返回名称 `Connect.Recovery` 与 `outcome` 财务报告和审定财务报表 `dismiss()`。 。 。 . 结果是 `CallbackRecovery.Model` 从 `domainkit/client`数字 : `kind` 实值 `cancelled`, (中文(简体) ), `restart`,或 `inspect`, (中文(简体) ), `provider` 确定再次报价的提供者,并可选择 `connectionId` 确定用于重新认证的现有连接。 回调提示是 不是成功联系的证据。 对于 `inspect`,在重试前检查连接的账户.

将提示显示为 `recoveryCancelled(provider)`, (中文(简体) ), `recoveryRestart(provider)`,或 `recoveryInspect(provider)` 从 `Messages.Catalog`,通过提供者的显示名。 每个 返回标题和描述。 用目录 `retry` 财务报告和审定财务报表 `dismissRecovery` 动作标签. 重试调用已有的连接控制器 `connect({ provider, method })` 与 顾客选择的方法。 当提示包含时 `connectionId`电话 `reconnect({ connectionId, provider, method })` 换句话说 域控制器和账户 控制器曝光; 域输入为 `Connect.ReconnectInput`. 解散清除可见的警报. 控制器剥离默认当前恢复参数 返回 URL ,即使另一个控件开始尝试,当前页面保持不变.

`dismiss()` 删除回收参数通过 `history.replaceState`,保存主机历史 状态,不相关的查询参数,和无导航的散列。 钩子回来了 `null` 期间 然后读取浏览器 URL。 它跟随浏览器 历史和散列事件并检查主机重报的 URL; 更改历史的客户端路由器 无需浏览器事件必须重新给消费者。 钩子不需要 `DomainKit.Root`。 。 。 .

## 流言对一个域的意义

`flow.state` 这是DomainKit必须说, 所以你自己的报价可以 命令旁边,而不是 与它竞争.

| 外地 | 说 |
| --- | --- |
| `connected` | 域Kit 持有此域的连接 |
| `offering` | 连接表面有东西可以提供 |
| `provider`, (中文(简体) ), `label` | 是谁掌握了联系,谁负责记录 |
| `receiptId`, (中文(简体) ), `applied` | 此域名的记录来自 |
| `connection`, (中文(简体) ), `provisioning` | 每个控制器状态的标签 |
| `readOnly` | 客户可以读取这个域名,但不写信 |

发现提供商的名字,其名称服务于域,以及 `Connect.hostProvider` 返回时 它的描述。 当没有注册供应商为这个区域服务时,域名Kit无法连接, 这样 `offering` 是虚假的。 过 `connect: "always"` 提供所有供应商,或者 `connect: "never"` 您的应用程序已经解决了另一个问题.

连接是客户对记录说"同意",所以计划建立自己的时刻 连接在连接符后和客户从提供者返回后着陆。 一个 `approve` 添加它们,而流又观测到域来读回. 一个已经存在的域 当后来的观察读取了其中的一则记录丢失,或者 错误,因此在提供者被删除的记录再次从同一个按钮中提供. 记录流动 自己的清理被带走不是那样的.

## 主计长

由同钩自作出流相. 每个选项对象返回一个命名对象 `Controller` 谁 `State` 是一个有标记的工会.

```tsx
const connection = Connect.useController({ domain });
const provisioning = Provision.useController({ domain, requirements, onApplied });
const cleanup = Cleanup.useController({ domain, receiptId, onCleaned });
const verification = Verify.useController({ domain, polling: true });
```

`approve` 授权计划文摘并加以应用. `reject` (一) 记录客户拒绝 尝试是终极的,需要一个新的计划. `retry` 当理由说出旧的时 制定新的计划 一个不见了, 重做失败的步骤 否则.

`Connect.describeMethods` 将一个提供者的认证方法安排到交互式方法中 点击和要求获得证书的人,所以一个连接的表面请求在 一个时间. `Connect.rejectedField` 命名一个拒绝的字段.

## 添加一个域

`Connect.useZones` 列出工作空间账户覆盖的每一区域, `Connect.useAccounts` 添加 另一个账户,不指定一个域并列出已经连接的域,每个域与 `label` 提供方提供的`null` 当时,供货商未点名 `Connect.useDomainField` 将文本输入转换为 这些区域上的组合框: 它返回 `inputProps`, (中文(简体) ), `listboxProps`,以及 `optionProps`移动 以箭头键突出显示,并在 Tab 或 Enter 上完成,同时保留任何子域 键入区前。 已经拥有被打出的名字的区是 自己最深处的 先说 一个没有连接区域 的完成名称 没有任何意义.

```tsx
const { zones } = Connect.useZones();
const field = Connect.useDomainField({ zones, value, onChange: setValue, onResolve });

<input {...field.inputProps} />
<ul {...field.listboxProps}>
  {field.suggestions.map((zone) => (
    <li key={`${zone.connectionId}:${zone.zone}`} {...field.optionProps(zone)}>
      {zone.zone}
    </li>
  ))}
</ul>;
```

## 成员的意见

可能读取域名但不会更改域名的客户 `readOnly`国家仍然提交报告 命令将更改域名 拒绝运行, 在控制器而不是在您的标记中, 所以不管怎样,你的控制无法到达运输.

```tsx
<DomainKit.Root transport={transport} readOnly>
  <DomainSetup />
</DomainKit.Root>
```

`Domain.useFlow` 当页面上只有一个域只读时, 使用相同的旗帜, 并使用 `flow.state.readOnly`,所以你的表面可以说谁可以连接 而不是渲染什么. 能力标注是另一半:运输未申报的组没有参加 `flow.capabilities`,所以运输 建造与 `Transport.fromFetch(url, { capabilities: ["connection", "verification"] })` 已经排除了 提供和清理. `readOnly` 包括不能表示的运输许可,例如: 达到同一路线的组织成员.

核查并不等待连接:流量遵守它给出的要求,所以 域名中没有任何提供者,但仍然有记录.

一个在自己的钟表上观察的宿主 通过了它所拥有的准备状态 `Domain.useFlow({ verification: { readiness, observe } })`,或作为 `supplied` 打开 `Verify.useController`。然后钩子在挂载上观察不到任何东西,没有设置计时器和路径 `observe` 财务报告和审定财务报表 `retry` 而漂移的再规划则会从所提供的价值中流出.

观察和核查重试保留只读,因为检查 DNS 读取 而不是改变域名。 供给和清理复试被拒. 连接 重新检查而不是重新发送失败的写入 .

## 单词

`Messages.Catalog` 每个用户可见字符串,包括标题和描述 `DomainKit.Error` 理由; 没有什么能成为标记、 状态文字或理由名称 。 过 `messages` 改为 `DomainKit.Root` 以覆盖任意密钥.

```tsx
const describe = Outcome.useDescribe();
const words = describe(error, { provider: "Cloudflare" });
```

## 记录

`Records.standingOf` 回答两个事实 `planned`,操作计划待定 保持记录,和 `observed`,要求最后保存的观察,证据 包含。 都一样 `null`。 。 。 . `Records.useCopy` 是剪贴板控制一个值需要,并且 `Records.toZoneFile` 财务报告和审定财务报表 `Records.downloadZoneFile` 拼写对客户的全部要求 谁用手编辑 DNS.

## 下一个.js

包项携带 `"use client"`。运输是函数的对象,所以在内部构建 一个客户端模块,而不是从服务器组件中传递一个.

## 学多点

-   [书记官处](https://domain-kit.dev/components/registry)
-   [反应源](https://github.com/AryaLabsHQ/domainkit/tree/main/packages/react)
-   [运输合同](https://github.com/AryaLabsHQ/domainkit/blob/main/packages/domainkit/src/Transport.ts)
-   [问题](https://github.com/AryaLabsHQ/domainkit/issues)

## 许可证

麻省理工学院

## 常见问题

### @domainkit/react 是什么？

自定义域设置的无头反应钩子

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

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

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

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

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

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

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

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

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

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

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

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

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

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