在前端开发中，表单是经常会用到的一个组件，而 JSON Schema 是一种用来对 JSON 数据进行约束和描述的格式。为了方便开发者使用 JSON Schema，在 npm 包中开发了一个名为 jb-react-jsonschema-form 的包，它可以帮助开发者快速地生成表单。
安装
npm install jb-react-jsonschema-form --save
使用
引入
import Form from 'jb-react-jsonschema-form';
数据结构
在使用 jb-react-jsonschema-form 进行表单渲染之前，需要先定义好表单的数据结构，这个数据结构通常是一个 JSON Schema 对象。
-- -------------------- ---- -------
----- ------ - -
------ -------
----- ---------
--------- ----------
----------- -
------ ------ --------- ------ -------- -------- -- --- -------
----- ------ ---------- ------ -------- -------- ------
-
--渲染表单
<Form schema={schema}
formData={formData}
onSubmit={onSubmit}
onError={onError}
onChange={onChange} />其中，FormData 代表表单数据的对象，onSubmit 代表表单提交的回调函数，onError 代表表单错误的回调函数，onChange 代表表单数据变化的回调函数。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ---- ---- ---------------------------
----- ------ - -
------ -------
----- ---------
--------- ----------
----------- -
------ ------ --------- ------ -------- -------- -- --- -------
----- ------ ---------- ------ -------- -------- ------
-
--
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
--------- ------- ------ ------- ----- -----
--
------------- - -------------------------
------------ - ------------------------
------------- - -------------------------
-
-------------------- -
----------------------
-
--------------- -
--------------------
-
-------------------- -
----------------------
--------------------------
-
-------- -
------ -
----- ---------------
------------------------------
------------------------
----------------------
------------------------ --
--
-
-
-------------------- --- ---------------------------------通过上述代码，我们可以快速生成一个简单的表单，并获取表单数据。同时，jb-react-jsonschema-form 还支持很多高级特性，比如界面的自定义、格式的校验等，可以根据需求逐一学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb581e8991b448dc5fa