废话不多说,先上代码
https://codesandbox.io/s/wild...
lowcode形式实现表单配置化(不晓得我对lowcode的了解是否正确,我认为lowcode就是分治,隔离,解藕。让逻辑变得可替换,对组件进行束缚,组合。对于组合是通过配置形式还是ui交互方式就无所谓)
我实现这个的核心思想就是,传入表单配置数组,配置项包含组件,组件参数,字段名,依赖项,近程获取数据的办法。
在form-creator.tsx中应用antd的Form组件作为容器,外部遍历配置项数组。渲染试图,将配置的组件参数通过解构的形式赋值。在这里对onValuesChange事件做了一次解决,因为须要记录最新的表单数据。
shouldAppear会承受以后最新的数据,来计算出是否要事实这个元素。
form-creator-item.tsx次要是对每一项做近程数据的解决还有缓存。resetFromServer包含两个属性
deps:string[]loadFn: (value: any) => Promise<ReactNode>
deps目标是可能从以后formData中pick出依赖的数据,传递给loadFn,并且依据每次的数据不同,都回以以后的值当作key,存起来。这样在用户批改选项的时候,如果选中了已经一样的值,就不会再次发申请啦。