不过，我发现了一个非常好用的表单插件，就是通过发送JSON配置生成表单视图的方法！！！！它就是FormRender，一站式的中后台表单解决方案。它的优点是什么？支持AntDesign和FusionDesign主流视觉主题使用JSONSchema标准协议描述表单配置，匹配丰富类型的可扩展组件支持1行N，支持对象无限嵌套，自定义正则校验，自定义样式组件，等特性列表拖拽已应用于飞猪、亚博科技、安防智能、淘宝、新零售行业工作台、人工智能实验室、天猫等多个场景，可支持复杂场景。？反正我已经用过了，真的很香！遇到这种灵活多变的表单配置需求，甚至需要将一个输入框和一个select封装成一个组件。写好一个组件后，必须在components中添加一个文件夹。如果使用这个插件，一些基础组件可以直接使用。如果不能满足你的需求，你也可以自定义组件（有类似场景的同学看看，受益匪浅）。说说这个插件的缺点吧。外挂才诞生两三年，可能会有一些Bug，这是难免的。文档不是很全，有待发掘。。。不过我用到现在没有什么大问题，所以大家会问？实际开发复杂度有多高？能支持复杂场景吗？能支持联动吗？能否支持多样化的定制需求？当然，答案是肯定的。接下来带大家体验设计协议层定义协议（schema）配置，展示层控制协议的渲染，工具层进一步提供上下游支持。在此基础上，FR遵循以下api设计：基于JSONschema的协议规范。JSONschema作为JSON数据校验的国际标准，主要用于表单数据的服务器端校验。已经连接到JSONSchema标准的团队几乎可以无缝连接到FR。极简组件api://controllableinput//form-render，只有更多的schema，用来描述Form是什么样子的在这样的设计下，FR始终只负责管理和更改表单数据/校验，如何使用表单数据和校验信息甚至提交方式完全取决于用户自由书写。支持复杂联动："showMore":{"title":"ShowMore","type":"boolean"},"input1":{"title":"InputBox1","type":"string","hidden":"{{rootValue.showMore===false}}"//当showMore的值为false时，隐藏}。支持个性化扩展：当存在现有表单元素不能满足需求的场景时，FR使用自定义组件，让用户可以自由扩展FR的组件库。备注：自定义组件就是普通的React组件，唯一的要求就是要有双向绑定值的value/onChange这两个props。所以如果现成的组件已经默认使用了value/onChange，可以直接使用。//编写自定义组件constMyInput=({value,onChange})=>{returnonChange(e.target.value)}/>;};//传入自定义组件;只需要在protocol上指定"widget":"MyInput"，对应的组件就可以用来render:text:{title:"Hello",type:"string","widget":"myInput"}在一个一句话，基于JSONschema的协议保证了FR的标准化，可控的组件模型保证了外部API的简洁性，以及解耦、联动&自定义组件的api保证了对大量复杂场景的良好支持。先说下小伙伴们最关心的实际使用体验吧。用户体验&流程安装：FormRender依赖于antdesign，别忘了安装antdnpmiform-render--save最简单的demoimportReactfrom'react';import{Button}from'antd';importFormRender,{useForm}来自“表单渲染”；constschema={type:'object',properties:{input1:{title:'简单输入框',type:'string',required:true,},select1:{title:'单选',type:'string',enum:['a','b','c'],enumNames:['early','middle','late'],},},};constDemo=()=>{constform=useForm();constonFinish=(formData,errors)=>{console.log('formData:',formData,'errors',errors);};返回(提交
);};exportdefaultDemo;从demo中不难发现FormRender的一些设计：schema用于描述表单展示，提交方式与antdv4类似。schema基于国际标准JSONschema，可以轻松使用任何antdprops。通过bind字段，我们允许数据的双向绑定，数据展示和实际提交的数据可以根据开发需求有所不同（比如从服务端接口获取不规则数据时，也可以直接使用).使用{{...}}编写表达式，完成简单的联动。值得一提的是这里的表达式支持所有的js语法。FR还提供了自定义组件、依赖声明、watch等工具，用于更复杂的定制。通过displayType、labelWidth等字段可以方便的修改显示。通过使用模式编辑器，生成表单的过程非常简单。有兴趣的同学可以按照下面的例子在线试一下，体验一下它的强大：使用在线schema编辑器构建表单，导出schema并将schema作为props传递给组件上线（只需替换demo中schema.json文件的内容即可）。在原有基础组件的支持下，我们需要一个复杂的联动自定义组件，如图：当时打包这个自定义组件时遇到的一个小坑：如上图所示，组件只挂载了一次，导致定义组件传递的recycleLinkCode。一开始获取的初始值为空，但是组件已经挂载了。接口返回recycleLinkCode的值时，传过来的数据不是实时更新的。官方给出的原因是：formData的更新会触发表单的重新渲染，但是recycleLinkCode不是表单值，所以不能使用form.setValues和form.setValueByPath来修改表单值解决方法：接口获取数据，加载组件；触发组件重新渲染，可以尝试这样写：useMemo(()=>,[recycleLinkCode])。写在最后总的来说，这个插件已经很不错了，可以满足一般表单的基本需求。使用拖拽式表单，也可以交给产品操作同学直接进行表单配置组合。
