# @fieldia/react 中文文档

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

版本：0\.36\.1
npm 元数据更新时间：2026-10-28T10:20:11.800Z
中文译文更新时间：2026-11-14T17:21:21.164Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：57.4 kB，15 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2026-10-02T07:49:15.949Z
- 最新版本发布：2026-10-28T10:20:11.589Z
- 近 30 天下载量：4186（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：50（近 12 个月 50 个）

## 中文简介

对Fieldia的回放装订:在平面-DOM取景器上,以自定义字段和槽为回放组件.

## 安装

```sh
npm install @fieldia/react
```

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

## README

# @ fieldia/ 反应

[外地](https://fieldia.dev/) 在反应 18 和 19 中的表单: 薄壳过 `@fieldia/viewer`,所以一个页面看起来和行为都与任何其他框架相同.

```sh
npm install @fieldia/react
```

```tsx
import { FieldiaForm } from '@fieldia/react';
import { createMemoryDataSource } from '@fieldia/core';
import page from './customer.page.json';

const dataSource = createMemoryDataSource();

export function Customer() {
  return <FieldiaForm page={page} dataSource={dataSource} recordId={1} skin="underline" />;
}
```

单位 **下一个** (或任何服务器的回复),给出组件 `firstPaint`数字 : 它使表单在服务器上成为了第一个涂料——它的平面HTML值, 在Fieldia的外观中——浏览器在任何脚本和水合物之前显示为 然则,观者在它上面,就把它拉上来,然后,他把它装满 同时键入( e)`@fieldia/viewer/server`) (中文(简体) ).

```tsx
// app/enquiries/[id]/page.tsx — a server component loads the record…
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const record = await loadEnquiry((await params).id);
  const nonce = (await headers()).get('x-nonce') ?? undefined; // with a strict Content-Security-Policy
  return <Enquiry record={record} nonce={nonce} />;
}

// enquiry.tsx — …and the client component paints it first.
'use client';
export function Enquiry({ record, nonce }: { record: Values; nonce?: string }) {
  return <FieldiaForm page={page} dataSource={dataSource} recordId={record.id as number} nonce={nonce} firstPaint={{ values: record }} />;
}
```

自定义字段和槽内容可以是 React 组件(`fieldTypes`, (中文(简体) ), `slots`(三); `useFormState(form)` 给一个形式状态 作为反应状态。 打开列表页面 一行通过 `onOpenRecord`。 。 。 .

表格上的事件是道具,每个在每一个渲染物上读取新内容而不挂起 再来一次; `onAction` 可能回答按钮或 `call` 步骤 :

```tsx
<FieldiaForm
  page={page}
  dataSource={dataSource}
  pages={pages}
  onAction={async ({ action, values }) => (action === 'check_stock' ? { values: { price: await priceOf(values.product) } } : undefined)}
  onChange={({ field, value, by }) => {}}   // by: 'person' | 'step' | 'app'
  onSave={({ recordId, values }) => {}}
  onSend={({ values }) => {}}
  onStep={({ step }) => {}}
  onRun={({ id, result }) => {}}
/>
```

`host` 财务报告和审定财务报表 `onOpen` 是查看者自己的选项(参见 `@fieldia/viewer`; 计 数 控件来源 `ref` 或者说 `onReady` 已经 `on`, (中文(简体) ), `setValues` 财务报告和审定财务报表 `run`。 。 。 .

一个页面带有 `continueLater` 打开您服务器上保存的草稿 `resume={new URLSearchParams(location.search).get('resume') ?? undefined}`,则 键后继续链接 `onDraft={({ key, later, saved }) => …}` 已被告知每份草稿。 一个新的 `resume` 打开这个草案,作为一个新的 `recordId` 打开记录.

从链接中填充字段的页面( E)`prefill`阅读浏览器的地址; 在服务器上或在其他页面中显示的应用程序会给出链接 知道吗 `url="https://homes.example/enquiry?agent=mona&unit=B-12"`页:1 `?…` 部分,或 `url={{ agent: 'mona' }}`。一个新的 `url` 从它开始表格.

**在你的应用程序离开前**,请检查一下: `await handle.form.leave()` 在路由更改之前, 在卸载之前 `<FieldiaForm>`, (中文(简体) ), 在改变再次挂起它的道具之前`page`, (中文(简体) ), `form`, (中文(简体) ), `dataSource`, (中文(简体) ), `recordId`, (中文(简体) ), `resume`, (中文(简体) ), `url`, (中文(简体) ), `user`, (中文(简体) ), `context`, (中文(简体) ), `dir`, (中文(简体) ), `labels`, (中文(简体) ), `fieldTypes`, (中文(简体) ), `slots`名称 内 `functions`) (中文(简体) ). 反应 立即卸下,所以没有别的东西能把人留在那里。 等着救赎 在路上,然后问 "放弃你的改变?" 只有当他们的工作有危险, 当他们选择逗留的时候,他们回答是虚假的. `warnOnLeave` 拥有浏览器本身 返回, 重新装入或关闭标签先询问, 而有更改没有保存 .

投出场或槽的组件按其制成的位置保存: 它显示一个小盒子 命名它, `onError={(error, where) => …}` 被告诉,和 其余的表格会挂起 否则反应会毁掉一切 在最接近的误差边界下,与它同为表单。 查看器拒绝的一页 说为什么在表格的位置, `onError` 并保留应用程序的挂载: 没有什么被扔进反应。 麻省理工学院有执照.

## 常见问题

### @fieldia/react 是什么？

对Fieldia的回放装订:在平面-DOM取景器上,以自定义字段和槽为回放组件\.

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

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

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

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

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

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

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

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

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

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

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

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