# @data-driven-forms/form-builder 中文文档
规范地址：https://npmcn.com/package/%40data-driven-forms/form-builder/
版本：0\.0\.13-rc1
npm 元数据更新时间：2025-11-20T14:37:44.801Z
中文译文更新时间：2026-11-11T14:15:10.428Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40data-driven-forms/form-builder
原文对照：https://npmcn.com/package/%40data-driven-forms/form-builder/?lang=original
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：349 kB，112 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- Node.js 要求：\>=12\.0\.0
- 运行依赖：6 个
- peer 依赖：react ^16\.13\.1 \|\| ^17\.0\.2，react-dom ^16\.13\.1 \|\| ^17\.0\.2，@data-driven-forms/react-form-renderer \>=3\.4\.1
- 首次发布：2019-12-11T12:57:33.095Z
- 最新版本发布：2021-11-09T12:35:43.421Z
- 近 30 天下载量：2414（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：53（近 12 个月 0 个）
## 中文简介
创建数据驱动窗体图的交互式拖放编辑器
## 安装
```sh
npm install @data-driven-forms/form-builder
```
也可以使用：`pnpm add @data-driven-forms/form-builder`、`yarn add @data-driven-forms/form-builder`、`bun add @data-driven-forms/form-builder`
## README
[](https://codecov.io/gh/data-driven-forms/form-builder) [](https://circleci.com/gh/data-driven-forms/form-builder/tree/master) [](https://badge.fury.io/js/%40data-driven-forms%2Fform-builder) [](https://twitter.com/intent/tweet?text=Check%20DataDrivenForms%20React%20library%21%20https%3A%2F%2Fdata-driven-forms.org%2F&hashtags=react,opensource,datadrivenforms) [](https://twitter.com/DataDrivenForms)
[](https://data-driven-forms.org/)
# 窗体构建器
**这个项目正在进展中。 所有的API是考虑 无法。 一切都可以改变。 新造型/BUG FIXS 可以花很长时间来实施.**
此组件允许构建 [数据驱动窗体](https://github.com/data-driven-forms/react-forms) 通过 DnD 特性的窗体.
**目录**
- [窗体构建器](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-formbuilder)
- [安装](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-installation)
- [发展](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-development)
- [所需资源](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-requirements)
- [用纱线安装](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-install-with-yarn)
- [开始操场](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-start-the-playground)
- [林特](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-lint)
- [测试](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-tests)
- [构建](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-build)
- [使用量](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-usage)
- [道具](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-props)
- [生育或子女](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-render-or-children)
- [马普](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-componentmapper)
- [建构器 Mapper](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-buildermapper)
- [战地拉尤特](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-fieldlayout)
- [属性编辑器](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-propertieseditor)
- [窗体连接器](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-formcontainer)
- [BUILDER 财务](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-builder_field)
- [构建库](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-buildercolumn)
- [属性组](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-propertygroup)
- [拖动手](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-draghandle)
- [空目标](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-emptytarget)
- [产品](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-componentproperties)
- [属性](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-attributes)
- [属性Name](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-propertyname)
- [标签](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-label)
- [组件](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-component)
- [禁用变量](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-disablevalidators)
- [禁用初始值](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-disableinitialvalue)
- [示例](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-example)
- [拾取器 Mapper](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-pickermapper)
- [属性 Mapper](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-propertiesmapper)
- [模式](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-mode)
- [计划](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-schema)
- [模式](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-schematemplate)
- [正在复制时复制](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-clonewhiledragging)
- [调试](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-debug)
- [打开编辑器](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-openeditor)
- [已禁用添加](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-disabledadd)
- [禁用 Drag](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-disabledrag)
- [地图员](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-mappers)
- [材料界面](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-material-ui)
- [版本5](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-version-5)
- [模式4](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-patternfly-4)
- [示例](https://npmcn.com/package/%40data-driven-forms/form-builder/#readme-example-1)
# 安装
`npm install --save @data-driven-forms/form-builder`
或者说
`yarn add @data-driven-forms/form-builder`
# 发展
## 所需资源
- UNIX 类似系统( Linux, MacOS)
- 节点12+
## 用纱线安装
`yarn`
## 开始操场
`yarn start`
运行中 `http://localhost:8080/`
## 林特
`yarn lint`
自动固定: `yarn lint --fix`
## 测试
`yarn test`
查看更改时 : `yarn test --watchAll`
## 构建
`yarn build`
要清理已建文件 : `yarn clean-build`。此操作在 `build`。 。 。 .
# 使用量
导入窗体构建器 :
```jsx
import FormBuilder from '@data-driven-forms/form-builder/form-builder';
```
并且使部件具有下列道具:
# 道具
## 生育或子女
_({组件 Picker,属性编辑器, DropTarget, 是Valid, getSchema, children}}} } } 反应 元素_
使用孩子或渲染功能来制作整个编辑器.
## 马普
_对象_
数据驱动格式组件映射器。 见 [这里](https://data-driven-forms.org/components/renderer#heading-formrenderer#requiredprops)。 。 。 .
## 建构器 Mapper
_对象_
一组创建窗体构建器的组件.
```jsx
import { builderComponentTypes } from '../src/constants';
const builderMapper = {
FieldLayout,
PropertiesEditor,
FormContainer,
[builderComponentTypes.BUILDER_FIELD]: builderField,
BuilderColumn,
PropertyGroup,
DragHandle,
EmptyTarget
}
```
### 战地拉尤特
_({儿童,禁用 Drag,拖放,所选 }} } 反应 元素_
单字段的包装器 = BUILDER FORM + DragHandle.
### 属性编辑器
_({_ _儿童,_ _儿童,_ _添加变量_, (中文(简体) ), _可用变量_, (中文(简体) ), _关闭_, (中文(简体) ), _手柄删除_, (中文(简体) ), _有财产错误_ _{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢? 反应 元素_
一个编辑.
### 窗体连接器
_({孩子,正在拖过>) 反应 元素_
在表单栏中将窗体包裹一圈.
### BUILDER 财务
_({_ _内置方案 : {隐藏字段,快照},_ _构成部分_, (中文(简体) ), _属性Name_, (中文(简体) ), _字段编号_, (中文(简体) ), _属性_, (中文(简体) ), _有财产错误_, (中文(简体) ), _...道具_ _{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢? 反应 元素_
围地打包.
### 构建库
_({孩子,正在拖过>) 反应 元素_
专栏.
### 属性组
_({班名,孩子,标题,手柄Delete}}} { } 反应 元素_
在属性编辑器 > 校验中围绕单个属性组的包裹.
### 拖动手
_({拖曳HandleProps, hasPropertyError, 禁用Drag }} } } { { 反应 元素_
一个拖把 小时候被传到菲尔德拉尤特.
### 空目标
_(单位:千美元) 反应 元素_
没有创建字段时显示空目标 .
## 产品
_对象_
每个组件的可编辑属性映射器。 属性是具有下列属性的对象:
### 属性
可编辑组件的属性 .
#### 属性Name
_字符串_
相当于计划中的一个属性.
#### 标签
_字符串_
在编辑器中显示属性的标签 .
#### 组件
_字符串_
属性映射器中对应密钥的组件 .
### 禁用变量
禁用在 `PropertiesEditor`。 。 。 .
未在窗体状态下注册的字段中自动禁用 .
### 禁用初始值
禁用初始值字段 `PropertiesEditor`。 。 。 .
未在窗体状态下注册的字段中自动禁用 .
### 示例
```jsx
const LABEL = {
propertyName: 'label',
label: 'Label',
component: 'input'
}
const componentProperties = {
[componentTypes.TEXT_FIELD]: {
attributes: [LABEL, IS_REQUIRED]
},
[componentTypes.PLAIN_TEXT]: {
attributes: [LABEL],
disableValidators: true,
disableInitialValue: true
}
}
```
## 拾取器 Mapper
_对象_
编辑器中可用的组件映射器 .
```jsx
const pickerMapper = {
[componentTypes.TEXT_FIELD]: ({ component }) => {component}
}
```
## 属性 Mapper
_对象_
组件属性中可用的组件映射器 .
```jsx
const propertiesMapper = {
input: ({ label, value, fieldId, innerProps: { propertyValidation }, ...rest }) =>
}
```
## 模式
_“ subset ” 的一个“ 默认 ”_ 选项
如果“ subset ” , 选项只能编辑到一定程度 。 见"通鉴".
## 计划
_对象_ 选项
数据驱动的表格方案。 见 [这里](https://data-driven-forms.org/components/renderer#heading-formrenderer#requiredprops)。 。 。 .
## 模式
_对象_ 选项
创建子集的原始计划 。 如果未指定, 将从方案创建可编辑边界 .
## 正在复制时复制
_布尔_ 选项
组件列表中的组件被拖取时被克隆.
## 调试
_布尔_ 选项
打开调试模式 。 将以 JSON 对象显示当前字段 .
## 打开编辑器
_布尔_ 选项
打开挂载上的第一个字段.
## 已禁用添加
_布尔_ 选项
禁用添加新字段 .
## 禁用 Drag
_布尔_ 选项
禁用拖曳 .
# 地图员
窗体构建器包含两个组件的映射器: **模式4** 财务报告和审定财务报表 **材料界面** 各个版本.
## 材料界面
```jsx
import {
pickerMapper,
propertiesMapper,
builderMapper,
BuilderTemplate,
fieldProperties
} from '@data-driven-forms/form-builder/mui-builder-mappers';
```
### 版本5
MUI-BUILDER使用第5版的MUI. 要使用版本4(`@material-ui/core`),请使用版本的构建器 `0.0.12-rc1`。 。 。 .
## 模式4
```jsx
import {
pickerMapper,
propertiesMapper,
builderMapper,
BuilderTemplate,
fieldProperties
} from '@data-driven-forms/form-builder/pf4-builder-mappers';
```
## 示例
```jsx
render={({ isValid, getSchema, ...props }) => (
)}
```
## 常见问题
### @data-driven-forms/form-builder 是什么？
创建数据驱动窗体图的交互式拖放编辑器
### 如何安装 @data-driven-forms/form-builder？
在项目目录运行 npm install @data-driven-forms/form-builder，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.13\.1 \|\| ^17\.0\.2）、react-dom（^16\.13\.1 \|\| ^17\.0\.2）、@data-driven-forms/react-form-renderer（\>=3\.4\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @data-driven-forms/form-builder 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/data-driven-forms\_\_form-builder 是否存在。
### @data-driven-forms/form-builder 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @data-driven-forms/form-builder 需要什么版本的 Node\.js？
package\.json 的 engines 字段要求 Node\.js \>=12\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。
### @data-driven-forms/form-builder 可以商用吗？
@data-driven-forms/form-builder 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @data-driven-forms/form-builder 的下载量有多少？
根据 npm 官方下载统计，@data-driven-forms/form-builder 在 2026/10/12 – 2026/11/10 这 30 天内被下载 2,414 次，日均约 80 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @data-driven-forms/form-builder 还在维护吗？
最新版本 0\.0\.13-rc1 发布于 2021/11/09（5 年前）；至今共发布 53 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/12/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。