FormRender是阿里巴巴飞猪中后台表单开箱即用解决方案，官方给的介绍是像写一个 input 一样写表单。大概功能通过JSON配置就能够生成出表单，这在实际业务上还是很有作用的，比如客户要加个字段去改源码太费劲了，并且性能比手动循环渲染的性能强。

FormRender 依赖 ant design，单独使用不要忘记同时安装 antd，就是说这个解决方案只适用于antd组件，结构上使用了 JSON Schema 国际规范。

支持校验rules

拓展props

内置组件

高级用法

• 表单联动 (比如勾选某个表单项触发显示或隐藏出另一个)
• 自定义组件（widget）

• 覆盖默认组件（mapping）
• 表单方法（form）跟antd from方法一样获取值，校验值，设置值

• 表单监听（watch）
• 生命周期 (加载 - 提交)

• 列表的展示
• 展示的最佳实践 设置标签宽度/位置

远程加载数据

比如配置个Select组件，但是数据源想从服务端取，可以在 onMount 中使用 form.setSchemaByPath 来实现。

图形化表单设计器

官方也开源了fr-generator 表单设计器，可以自行集成到项目里

npm i fr-generator

同样也提供了可视化编辑器的 VSCode 插件版本

FormRender的功能基本能满足90%的表单，如果有特别需求的还是手动实现，也可以通过阿里的另一款formilyjs实现，不过formilyjs学习成本比较高。

相关链接：

项目官网：https://x-render.gitee.io/form-render

Github项目地址：https://github.com/alibaba/x-render