form-render的简单使用心得（FormRender现已升级到 XRende）-CSDN博客

本文链接：https://blog.csdn.net/weixin_45942049/article/details/110046122

本文介绍了form-render表单生成器的使用体验，重点讲解了如何通过Schema描述表单结构、联动机制的新增API，以及在实际项目中的应用案例。由于其资料匮乏，作者分享了学习过程中的挑战与解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

偶尔一次使用了form-render表单生成器，使用方便简单，通过简单的Schema就可以生成表单，很符合数据驱动这一理念，基本需求也都能满足。
但是作为新兴的react第三方包，缺点就是互联网上相关资料太少，在使用过程中想要熟悉一些API的使用，相关实例也较少。具体使用事例如下：
简单示例

  // 使用 Ant Design 体系
  import FormRender from "form-render/lib/antd";
  // 首先写好完整的'数据' 
  "schema": {
    "type": "object",
    // (更新后的1.x与0.x写法略有区别)
    "labelWirth": 130,
    "properties": {
      "string": {
        "title": "输入框",
        "type": "string"
      },
      "select": {
        "title": "可选择",
        "type": "string",
        "enum": [
          "a",
          "b",
          "c"
        ],
        "enumNames": [
          "1",
          "2",
          "3"
        ]
      }
    }
  },
  // onChange事件可以动态获取表单状态
  "formData": {
    "string": "",
    "select": "a"
  }
  // '数据'作为属性值拿到FormRender中使用
  <FormRender schema={schema} formData={formData} onChange={setFormData} />

Schema用于描述表单的基本信息、结构和校验，
其中type类型则是表单的类型（表现在UI），支持 string、number、boolean、array、object、range
default是表单的默认值
uiSchema属性来控制表单项的 UI 展示
如：

        'ui:className': 'qttitle' // 添加标题格式
        
        'ui:readonly': true // 禁止改动，只读
        
        'ui:widget': 'switch'  //开关形式
        
        'ui:disabled':'{{rootValue.optionName === true}}'  //  隐藏（一些互斥关系）

"schema": {
    "type": "object",
    "properties": {
      "string": {
        "title": "字符串",
        "type": "string",
        "ui:width": "50%"  //此时表单的宽度为50%
      }
   }
}

列举皆为简单控件的实现，因工作原因互斥关系等操作不宜展示，因为在实现过程中因为示例较少，理解API需要花费过长时间，如若需要可互相交流
Let yourself gradually excellent

最近又有需求用到formrender了，不得不说更新很快，又增加了些许Api。
表单之间的联动增加了一个watc监听

  const form = useForm();

  const watch = {
    // # 为全局
    '#': val => {
      console.log('表单的时时数据为：', val);
    },
    input1: val => {
      form.setValueByPath('input2', val);
    },
  };

  return <FormRender form={form} schema={schema} watch={watch} />;```