介绍
pivot-form 是一个基于 React 的动态表单生成器，可以帮助前端开发者快速构建复杂的表单。pivot-form 的特点是可以根据 json 数据自动生成表单，同时支持自定义组件的集成和扩展，能够满足大部分表单需求。
安装
使用 npm 安装
npm i pivot-form --save
使用 yarn 安装
yarn add pivot-form
使用
导入
import PivotForm from 'pivot-form'; import 'pivot-form/dist/pivot-form.css';
简单示例
-- -------------------- ---- -------
------ ------ - ----------- - ---- --------
------ --------- ---- -------------
-------- -------- -
----- ------------ - ---------------- -- -
----------------- ------ ------
-- ----
----- ------ - -
----- ---------
----------- -
----- -
----- ---------
------ -----
--
---- -
----- ---------
------ -----
--
------- -
----- ---------
------ -----
----- -------- ----------
--
-------- -
----- ---------
------ -----
--
----- -
----- ---------
------ -----
--
-------- -
----- ---------
------ -----
--
--
--------- -------- ------ ----------
--
----- -------- - -
----------- -------- --------- ---- ---------- ------- -----------
--
------ -
----------
---------------
-------------------
-----------------------
---------------
--
--
-schema
schema 是定义表单结构的 json 对象，可以用来定义表单的字段类型、标题、描述等信息。下面是一个示例：
-- -------------------- ---- -------
----- ------ - -
----- ---------
----------- -
----- -
----- ---------
------ -----
------------ ----------
--
---- -
----- ---------
------ -----
------------ ----------
--
------- -
----- ---------
------ -----
----- -------- ----------
------------ ----------
--
------ -
----- ---------
------ -------
------------ ------------
--
--
--------- -------- ------ --------- ---------
--schema 中定义了表单的类型为 object，其中包含了四个属性：name、age、gender 和 phone。每个属性都定义了类型、标题、描述等信息。
uiSchema
uiSchema 是用来定义表单显示效果的 json 对象，可以用来定义表单的布局、样式等信息。下面是一个示例：
-- -------------------- ---- -------
----- -------- - -
----------- -
----- ----------
------ -----------
--
----------- -------- --------- ---- ------ ---------
------------ -
-
----- -
--- --
--
------- -
--- --
--
---- -
--- ---
--
--
-
---- -
--- --
--
------ -
--- --
--
--
--
--uiSchema 中定义了表单的 class 名称、字段顺序和布局信息。其中 classNames 是指定表单的 class 名称，可以用来定义表单的样式；ui:order 是指定表单字段的顺序，其中 * 表示剩余的字段按原顺序显示；ui:layout 是指定表单的布局信息，可以根据类似 Bootstrap 的栅格系统快速指定表单布局。
自定义组件
pivot-form 支持自定义组件，可以根据需要自定义表单字段的类型和样式。下面是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------------ -
----- - ------ ------ -------- - - ------
-------- ------------- -
-----------------
-
------ -
-----
----------------------
------- ------------- ----------------------
------ - --- - ----
---------
------
--
-
------ ------- -------------- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ ----------- ---- ----------------
-------- -------- -
----- ------ - -
----- ---------
----------- -
------ -
----- ----------
------ -------
--
--
--
----- -------- - -
----------- ------------
--
------ -
---------- --------------- ------------------- ---------------------- --
--
-自定义组件需要实现 onChange 方法，并且接收 label、value 和 onChange 参数。在 uiSchema 中使用 ui:field 指定自定义组件即可。此例中使用的 MyComponent 组件是一个简单的两个按钮，点击可以改变表单的值。
结语
pivot-form 是一个非常实用的表单生成器，可以帮助前端开发者快速构建复杂的表单。通过简单的配置，可以实现自定义组件和布局，使得表单开发变得更加简单和高效。希望本文能够对读者了解 pivot-form 等 npm 包的使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bcc81e8991b448e5702