Redux 实现动态表单的一种思路

动态表单

最近接到这样的需求:根据约定的schema来渲染表单

[
  {
      "label": "超时时间", // 配置标签,可读,国际化
      "name": "Timeout",  // 配置项名称
      "valueType": "Number",  // 配置类型,Boolean/Integer/Float/String/List/Json
      "editorType": "Input", // 前端控件类型,Input/Password/Select/MultiSelect/TextArea
      "defaultValue": "600",  // 默认值
      "description":"", // 描述
      "valueOptions": [], // 取值枚举
      "minLength": 0, // 最小长度,仅针对String类型
      "maxLength": 0, // 最大长度,仅针对String类型
      "maxValue": 3600, // 最大值,仅针对Number类型
      "minValue": 1, // 最小值,仅针对Number类型
      "regexPattern": "", // 正则匹配模式,仅针对String类型
      "regexDesc": "",  // 正则匹配模式描述,仅针对String类型
    },
]

难点

  1. 非标准化,自定义的表单如何动态渲染
  2. 表单之间需要联动,如何进行通信

方案

  1. 自定义的表单,手动实现是不可避免的。但是我们需要一个通用的表单管理工具,自定义的表单只需要实现对应的接口就好。我们以 fusion.design为例:https://fusion.design/component/basic/field

  2. 表单之间通信


    Redux 实现动态表单的一种思路_第1张图片
    image.png

结论

上面的方案我们可以看到:

  1. 自定义的表单只需要实现Filed的接口,就可以被统一管理
  2. 组件之间的联动通过Redux全局处理。组件联动意味着业务形式不一致。这样的情况下,我们可以封装多个业务的模板来满足差异性

你可能感兴趣的:(Redux 实现动态表单的一种思路)