React + ant D + TS handles complex forms gracefully

Time:2021-10-15

No more nonsense. Let’s start with the code
https://codesandbox.io/s/wild…

Realize form configuration in lowcode mode (I don’t know if my understanding of lowcode is correct. I think lowcode is divide and conquer, isolation and decoupling. Make logic replaceable, restrict and combine components. It doesn’t matter whether the combination is through configuration or UI interaction)

The core idea of my implementation is to pass in the form configuration array. The configuration items include components, component parameters, field names, dependencies, and methods to obtain data remotely.

In form-creator.tsx, the form component of antd is used as a container to internally traverse the configuration item array. Rendering attempts to assign the configured component parameters by deconstruction. Here, the onvalueschange event is processed once because the latest form data needs to be recorded.
Shouldapear will accept the latest data to calculate whether to realize this element.

Form-creator-item.tsx is mainly used for remote data processing and caching of each item. Resetfromserver includes two properties

deps:string[]
loadFn: (value: any) => Promise<ReactNode>

DEPs aims to pick up the dependent data from the current formdata and transfer it to loadfn. According to different data each time, the current value will be used as a key and stored. In this way, when the user modifies the options, if the same value is selected, the request will not be sent again.