一个表单由一个数组定义，对象type为要渲染的组件, name为收集数据的key,其他属性定义组件其他的props， 基于哪个库，则参考相关库的组件API文档配置即可，对于一些特殊的/不存在的组件我们定义render函数动态渲染，然后就没有其他的了，全部是你熟悉的React， 最终我们可以定义一个自己的FormRender 接受一个一维数组用于从上往下排列表单项(用render不限于表单项，你可以render任意内容)， 一个data用于数据收集，一个setData用于数据更新 (源自React Hooks useState)， 就这么简单，源码如下
import React from 'react'; import { Cell, Radio, DateSelect, Select } from 'zarm'; // 对于无法配置(比如自定义组件，需要根据条件显示的组件等)的情况， 请使用render方法， // getJSON() 动态返回json // render() 自定义render export default function FormRenderer({ layoutData, data, setData }) { const onFiledChange = (name, value) => { let v = value; // for Select ctrl if (Array.isArray(value)) { v = value.map((item) => item.value)[0]; } setData({ ...data, [name]: v }); }; const onChangeFactory = (name) => (value) => onFiledChange(name, value); return ( <div className="renderer"> {layoutData.map((item, idx) => { if (typeof item.getJSON === 'function') { item = item.getJSON(); } if (typeof item !== 'object' || !item) return null; const { name, type, description, items, elProps = {}, cellProps = {}, render, ...props } = item; if (typeof render === 'function') { return render(); } let children = []; if (Array.isArray(items) && type === Radio.Group) { children = items.map((it, idx1) => ( <Radio value={it.value} key={idx1}> {it.label} </Radio> )); } props.value = data[name]; props.onChange = onChangeFactory(name); if (type === Select) { props.dataSource = items; } if (type === DateSelect || type === Select) { props.onOk = props.onChange; delete props.onChange; props.onChange = elProps.onChange; } return ( <Cell key={idx} title={item.label} description={description} {...cellProps} name={name}> {React.createElement(type, { ...props, ...elProps }, ...children)} </Cell> ); })} </div> ); }
配置说明
import * as React from 'react'; export interface Item { type: React.Component; // 组件类型， 比如Input 等 name: string; // key items?: Array<any>; // dataSource description: string; // Cell description label?: string; // Cell title render?: () => React.ReactNode; //自定义 render getJSON?: () => object | null; // 动态返回Item配置 elProps?: object; // 组件的props配置 , 比如type为Input, elProps则会配置到Input cellProps?: object; // cell props配置 } export interface Props { layoutData: Array<Item>; // 表单布局配置 data: object; // 数据存储,name作为key,内容为value setData: () => void; // 数据更新 } interface FormRenderer extends React.FC<Props> {} declare const FormRenderer: FormRenderer; export default FormRenderer;
上述代码效果如下
这种方式唯一缺点是无法像json一样持久化存储在数据库 ，优点是可以统一移动和pc端表单配置式开发，少了大量的样板代码和嵌套，可以统一处理数据的存取和验证,表单项的排列方式 。
到此这篇关于基于react hooks,zarm组件库配置开发h5表单页面的文章就介绍到这了,更多相关react hooks,zarm组件库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: