最近利用React Hooks团结zarm组件库，基于js工具设置方法开拓了大量的h5表单页面。各人都知道h5表单成果无非就是表单数据的收集，验证，提交，回显编辑，凡是分列方法也是自上向下一行一列的方法显示 ， 所以一开始就思量封装一个设置化的页面生成方案，今朝已经有多个项目基于此方法设置开拓上线，思路和实现分享一下。
利用场景任意包括表单的h5页面（利用zarm库，或自行适配本身的库）
方针代码实现简朴和简捷
基于设置
新手上手快，无进修本钱
内行易扩展和维护
写之前参考了市面上的一些方案 ，大多都是通过界说json schema方法界说一套名目， 好比阿里的form-render ,通过 JSON Schema界说表单， 有可视化编辑器设置，导出json文件，动态渲染，凡此各种，无出其外。 这里就以阿里form-render为代表，谈谈它的一些缺陷 (利益自行参考官网宣传)
form-render或思路一些缺陷1.我的方针是h5， form-remder今朝仅仅是pc靠山表单设置方案，提供了antd和fusion主题，默认不支持h5
2.form-render 支持扩展组件，内部维护了一个映射表 mapping， 映射了数据范例和组件的映射干系,好比antd主题各数据范例和antd组件的映射干系如下,假如我有一套本身的/第三方公司统一利用的h5组件库，需要本身去设置扩展,较量贫苦。
// 譬喻在antd下映射如下： export const mapping = { default: 'input', string: 'input', array: 'list', boolean: 'checkbox', integer: 'number', number: 'number', object: 'map', html: 'html', 'string:upload': 'upload', 'string:date': 'date', 'string:dateTime': 'date', 'string:time': 'date', 'string:textarea': 'textarea', 'string:color': 'color', 'string:image': 'input', 'string:email': 'input', 'string:url': 'url', 'range:date': 'dateRange', 'range:dateTime': 'dateRange', '*?enum': 'select', 'array?enum': 'checkboxes', };
假如用过/开拓过 form-render 等基于json schema的东西， 有一个需求处理惩罚较量贫苦， 好比表单字段联动处理惩罚， form-render 提供了有限的几个联动属性，ui:options,ui:disabled,ui:hidden等， 这样算下来，除了需要把握form-render界说的数据范例，数据范例主题组件映射,及组件关联的各类属性，还要背下特另外联动属性，不过乎多学了一门新编程的庞洪水平，所以需要可视化界面帮助编辑。
import React, { useState } from 'react'; import FormRender from 'form-render/lib/antd'; const schema = { type: 'object', properties: { select: { title: '单选', type: 'string', enum: ['a', 'b'], enumNames: () => ['显示输入框', '埋没输入框'], 'ui:disabled': (formData, rootValue) => rootValue.input1.length > 5, 'ui:widget': 'radio', }, input1: { title: '输入框', description: '实验输入高出5个字符', type: 'string', 'ui:hidden': (formData, rootValue) => formData.select === 'b', }, }, }; const Demo1 = () => { const [formData, setFormData] = useState({}); return ( <FormRender schema={schema} formData={formData} onChange={setFormData} /> ); }; export default Demo1;
4.这种设置的json适合非开拓人员快速怼出表单成果， 可是不适合开拓人员开拓扩展，好比我要在两个输入框中间放个图文混排的对象. （另行开拓一个自界说组件挂载？）
javascript object 方案所以以阿里form-render 等以json设置实现动态渲染的方案不能满意 简朴，快速，打破，共赢的码农保留准则， 假如把json换成javascript object , 那设置和扩展的本领就纷歧样了, 这里我们照旧借用form-render的总体思路，可是将type从string,number,boolean,array,object,html等数据范例换成Function，一个Function就是一个React组件，好比antd-mobile ,zarm 的Input组件,因为本文基于zarm, 后头都基于zarm展开（对antd-mobile ，vue等级三方移动端/pc端同样合用） ，譬喻下面的设置
import React, { useState, useEffect } from 'react'; import FormRenderer from 'zarm-form-render'; import { Input, Cell, Radio, Select, DateSelect, Button, Toast, Panel } from 'zarm'; export default function App() { const [data, setData] = useState({}); const layoutData = [ { type: Input, label: '被保人姓名', placeholder: '请填写', name: 'name', }, { type: Radio.Group, label: '性别', name: 'gender', elProps: { type: 'button', ghost: true, }, items: [ { label: '男', value: 'male' }, { label: '女', value: 'female' }, ], }, { render() { if (!data.gender) return null; return <Cell title="你是" description={data.gender === 'male' ? '男生' : '女生'}></Cell>; }, }, { type: Select, label: '爱吃的水果', name: 'favfood', elProps: { dataSource: [ { label: 'apple', value: 'apple' }, { label: 'banana', value: 'banana' }, ], }, }, { type: DateSelect, label: '出生日期', title: '被保人出生日期', placeholder: '请选择', name: 'birthday', min: '1900-01-01', }, { type: Input, label: '手机号', placeholder: '请填写', name: 'mobile', }, { render() { return <div style={{ margin: '30px 6px',}}></div>; }, }, { render() { return ( <Panel title="你录入的内容"> <div style={{ margin: '10px 6px' }}>{JSON.stringify(data)}</div> </Panel> ); }, }, ]; return ( <div> <FormRenderer layoutData={layoutData} data={data} setData={setData} /> <Button block theme="primary" onClick={() => Toast.show(JSON.stringify(data))}> 确定 </Button> </div> ); }