简介
react-jsonschema-form-layout-2 是一个基于 react-jsonschema-form 的扩展组件，可以在使用 JSON Schema 描述表单的时候提供更多的布局方式和样式。
安装
通过 npm 安装：
npm install --save react-jsonschema-form-layout-2
使用方法
引入
-- -------------------- ---- -------
------ ---- ---- ------------------------
------ ------ ---- ---------------------------------
----- ------ - -
-- -- ---- ---------
-------
--
----- ------ - -
-- - ------ ----------
----- ---------
----------- -
----- -
------ -----
----- ---------
--
---- -
------ -----
----- ---------
--
-------- -
------ -----
----- ---------
----------- -
--------- -
----- ---------
------ -----
----- ------- ------ -------
--
----- -
----- ---------
------ -----
----- ------- ------ ------ -------
------------- -
--------- ------- -------
--
--
----- -
----- ---------
------ -----
----- -
------
------
------
------
-------
------
------
--
------------- -
--------- ------
--
--
------- -
----- ---------
------ -------
------------ -----------
--
--
--
--
-- ----
------- -
-
------ -------
------ -
- ---- ------- ------ - --
- ---- ------ ------ - --
--
--
-
------ -------
------ -
- ---- ------------------- ------ - --
- ---- --------------- ------ - --
- ---- --------------- ------ - --
- ---- ----------------- ------ -- --
--
--
--
--
----- -------- - ---
----- ------ - -- -- -
----- --------------- ------------------- --------------- --
--属性
react-jsonschema-form-layout-2 扩展了 Layout 属性、layout 属性和 order 属性。
Layout
通过 $ref 引入 Layout 组件：
const fields = {
Layout,
};在 schema 中使用 Layout 属性：
-- -------------------- ---- -------
----- ------ - -
------- -
-
------ -------
------------ ------------
------ -
- ---- ------- ------ - --
- ---- ------ ------ - --
--
--
--
----------- -
----- -
----- ---------
------ -----
--
---- -
----- ---------
------ -----
--
--
--layout
通过 layout 属性指定布局：
-- -------------------- ---- -------
----- ------ - -
------- -
-
------ -------
------------ ------------
------ -
- ---- ------- ------ - --
- ---- ------ ------ - --
--
--
--
----------- -
----- -
----- ---------
------ -----
--
---- -
----- ---------
------ -----
--
--
--order
通过 order 属性调整输入项的顺序：
-- -------------------- ---- -------
----- ------ - -
------ -------- -------
----------- -
----- -
----- ---------
------ -----
--
---- -
----- ---------
------ -----
--
--
--示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- ------------------------
------ ------ ---- ---------------------------------
----- ------ - - ------ --
----- ------ - -
------ -------
------- -
-
------ -------
------ -
- ---- ------- ------ - --
- ---- ------ ------ - --
--
--
-
------ -------
------ -
- ---- ------------------- ------ - --
- ---- --------------- ------ - --
- ---- --------------- ------ - --
- ---- ----------------- ------ -- --
--
--
-
------ -------
------ -
- ---- ------- ------ - --
- ---- --------- ------ -- --
--
--
--
----------- -
----- -
----- ---------
------ -----
--
---- -
----- ---------
------ -----
--
-------- -
----- ---------
------ -------
----------- -
--------- -
----- ---------
------ -----
----- ------- ------ -------
--
----- -
----- ---------
------ -----
----- ------- ------ ------ -------
------------- -
--------- ------- -------
--
--
----- -
----- ---------
------ -----
----- -
------
------
------
------
-------
------
------
--
------------- -
--------- ------
--
--
------- -
----- ---------
------ -------
------------ -----------
--
--
--
----- -
----- ---------
------ -------
----- --------- -------- ---------
-------- --------
--
------- -
----- ---------
------ -------
------------ -----------
--
--
--------- -------- ------ ---------- --------
--
----- -------- - -
----- --------
--
----- ------ - -- -- -
----- --------------- ------------------- --------------- --
--
------ ------- -------总结
通过 react-jsonschema-form-layout-2 的扩展，我们可以更加简洁地表达表单的布局和样式，为用户提供更好的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5f51ab1864dac671b9