alibaba/form-render 可跨组件体系的表单配置生成方案

alibaba/form-render

FormRender 是一个经过 JSON Schema 生成标准 Form 的渲染引擎，经常使用于自定义搭建配置界面生成

好比你有想经过必定标准约束自动生成表单配置界面，相似于搭建配置表单界面这种场景，就能够考虑 FormRender，好比这些类型场景>>>

在内部实践一年后，也有十多个BU在使用，为了让外部也能够用上，咱们于今年10月份对它进行的开源到 alibaba/form-render🏄🏄🏄

假如你喜欢欢迎 Star 或者参与进来一块儿建设！

为何要作 FormRender ？

中后台 50%的场景和表单有关，并在可灵活配置上要求很高，特别是搭建表单配置场景，经过下发 JSON 配置来生成表单视图的方式能够提升效率

调研过集团内外相关方案，可支持 Antd 或者 Fusion 体系、知足 JSON Schema 协议、配置简单便可使用的方案暂无找到

思路

基于此，咱们底层引擎用纯原生 JS 来实现，经过解析 JSON Schema 配置，并支持渲染原生的 HTML 表单，经过 UiSchema 来配置 Widget 组件，在此基础上处理好上层 Antd 或 Fusion 组件 Widget 和 Input Format 的对应关系，最后还能够作到无缝接入其余组件体系的好处

特色

• 支持 Ant Design 和 Fusion Design 主流的视觉主题
• 使用 JSON Schema 标准协议描述表单配置，并搭配丰富类型且可扩展的组件
• 支持 1 排 N、支持对象无限嵌套、自定义正则校验、自定义样式组件、列表拖拽等特性
• 已在飞猪、亚博科技、安全智能、淘宝、新零售行业工做台、人工智能实验室、天猫等多BU多场景使用，可支持复杂场景使用
• 使用上有详细文档，维护上有专人支持

如何使用

// 安装
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(<App />, rootElement);
复制代码

文档以下

• github.com/alibaba/for…

• 文档官网

• Demo 探索 / Code Sandbox

• 常见场景

• Proptypes to Json Schema

• FormRender 用户群