介绍
form-render是阿里开源的跨组件体系的表单渲染引擎 - 通过 JSON Schema 快速生成自定义表单配置界面,常用于自定义搭建配置界面生成。
Github
https://alibaba.github.io/form-render/#/
安装
npm i form-render -S
import React from "react";
import ReactDOM from "react-dom";
// 使用 Ant Design 体系
import FormRender from "form-render/lib/antd";
// 使用 Fusion Design 体系
// import "@alifd/next/dist/next.min.css";
// import FormRender from "form-render/lib/fusion";
// propsSchema 使用标准的 JSON Schema 来描述表单结构
const propSchema = {
type: "object",
properties: {
dateDemo: {
title: "时间",
type: "string"
}
}
};
// uiSchema 可以增强展示类型的丰富性,如时间组件
const uiSchema = {
dateDemo: {
"ui:widget": "date"
}
};
class App extends React.Component {
constructor() {
super();
this.state = {
formData: {}
};
}
// 数据变化回调
onChange = value => {
this.setState({
formData: value
});
};
// 数据格式校验回调
onValidate = list => {
console.log(list);
};
render() {
const { formData } = this.state;
return (
<formrender> propsSchema={propSchema}
uiSchema={uiSchema}
formData={formData}
onChange={this.onChange}
onValidate={this.onValidate}
/>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);/<formrender>
文档API
- 常用API
- 不常用API
form-render原理
FormRender 底层引擎用原生 JS 来实现,通过解析 JSON Schema 配置,并支持渲染原生的 HTML 表单,通过 UiSchema 来配置 Widget 组件,在此基础上处理好上层 Ant Design 或 Fusion 组件 Widget 和 Input Format 的对应关系,最后还可以做到无缝接入其他组件体系的好处
使用场景
1. 规范化表单视图的快速生成:写好对应的参数配置,快速生成一个标准表单,省去了使用类 Ant Design 表单的麻烦地方
2.可视化配置界面生成:并可以从代码层面自动生成 JSON Schema,来完成整体流程的打通
3.服务能力配置界面生成:常用于后台字段系统中,接口同学通过吐 JSON Schema 字段给前端界面,渲染出他所想要的界面以及获取用户的输入进行提交给后端,可以起到无需发布就可无缝扩展各种类型的作用
4.作为配置输入和搭建系统配合使用:FormRender 在正常展示的情况下,可以很简单的进行和原主题的适配使用
总结
介绍这样一个表单渲染引擎,是因为目前有很多地方需要用到自定义表单,如果配合上拖拽界面,即可实现一个自定义的智能表单,底层的渲染交给form-render即可,如果你想用它来做一些有意思的东西,不妨尝试一番!
閱讀更多 最美分享Coder 的文章