antd 动态添加表单_React 如何设计动态化表单

前言

对于 ToB 业务而言，随着业务的不断壮大，接入的客户逐渐增加，相同页面的差异化的需求越来越多，尤其是在表单层面，小到多一个字段少一个字段这种简单的需求，大到整个页面不变的只剩下一些基础字段。一旦这种差异化需求随着业务量的增长而膨胀起来。代码中的 IF ELSE 越来越多，项目就越来越难以维护。基于这个问题，比较普遍的解决方案要么是项目拆分，要么相同项目的代码分割。

这两种方案都有维护成本比较大的弊端，那么有没有更好点的解决方案呢。本文就带你了解一下动态化表单搭建。

什么是动态表单

先下个定义，动态表单是页面根据管理端配置的不同的 Schema 结构，动态渲染出不同的表单项的表单。动态表单一般分两个部分，管理端和渲染端。管理端配置表单项及相应的简单交互产出 Schema 数据。渲染端根据 Schema 数据相应的渲染出不同的表单项并实现简单的交互。大致流程如下。

图片

动态表单的实现

表单配置

对于 Schema 数据的配置，考虑到接入业务方的接入成本及维护成本。管理端采用了可拖拽式的所见即所得配置面板。这里共分为四个部分，备选组件面板，拖拽面板，组件属性面板和表单属性配置(视图属性)。具体实现如下图：

图片