介绍

form-render是阿里开源的跨组件体系的表单渲染引擎 – 通过 JSON Schema 快速生成自定义表单配置界面，常用于自定义搭建配置界面生成。

支持 Ant Design 和 Fusion Design 主流的视觉主题

使用 JSON Schema 标准协议描述表单配置，并搭配丰富类型且可扩展的组件

支持 1 排 N、横纵排、支持对象无限嵌套、自定义正则校验、自定义样式组件、列表拖拽等特性

已在淘宝、天猫、飞猪、亚博科技、安全智能、新零售行业工作台、人工智能实验室、安全智能部门等多 BU 多场景使用，简单使用同时支持复杂场景使用

使用上有详细文档，维护上有专人支持

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 (
 
 );
 }
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

文档API

常用API

不常用API

form-render原理

FormRender 底层引擎用原生 JS 来实现，通过解析 JSON Schema 配置，并支持渲染原生的 HTML 表单，通过 UiSchema 来配置 Widget 组件，在此基础上处理好上层 Ant Design 或 Fusion 组件 Widget 和 Input Format 的对应关系，最后还可以做到无缝接入其他组件体系的好处