react+antd+ts优雅处理复杂表单

废话不多说，先上传代码https://codesandbox.io/s/wild...lowcode方式实现表单配置（不知道自己理解的对不对lowcode是正确的），我觉得lowcode就是分而治之，隔离，解耦。使逻辑可替换，约束组件，然后组合。组合是通过配置还是ui交互都无所谓。）我实现这个的核心思想是传入Form配置数组，配置项包括组件，组件参数，字段名，依赖，以及远程获取数据的方法。在form-creator.tsx中，使用antd的Form组件作为容器，内部遍历配置项数组。渲染视图，通过解构赋值配置好的组件参数。这里处理onValuesChange事件是因为需要记录最新的表单数据。shouldAppear会接受最新的数据来计算是否显示这个元素。form-creator-item.tsx主要是对每个item进行远程数据处理和缓存。resetFromServer包含两个属性deps:string[]loadFn:(value:any)=>Promisedeps的作用是能够从当前的formData中挑出依赖的数据传给loadFn。返回当前值作为键并保存。这样，当用户修改选项时，如果选择了相同的值，则不会再次发送请求。