alibaba/form-render 可跨組件體系的表單配置生成方案

時間 2019-11-17

標籤 alibaba form render 組件體系表單配置生成方案欄目 HTML 简体版

原文原文鏈接

alibaba/form-render

FormRender 是一個經過 JSON Schema 生成標準 Form 的渲染引擎，經常使用於自定義搭建配置界面生成css

好比你有想經過必定標準約束自動生成表單配置界面，相似於搭建配置表單界面這種場景，就能夠考慮 FormRender，好比這些類型場景>>>html

在內部實踐一年後，也有十多個BU在使用，爲了讓外部也能夠用上，咱們於今年10月份對它進行的開源到 alibaba/form-render🏄🏄🏄react

假如你喜歡歡迎 Star 或者參與進來一塊兒建設！git

爲何要作 FormRender ？

中後臺 50%的場景和表單有關，並在可靈活配置上要求很高，特別是搭建表單配置場景，經過下發 JSON 配置來生成表單視圖的方式能夠提升效率github

調研過集團內外相關方案，可支持 Antd 或者 Fusion 體系、知足 JSON Schema 協議、配置簡單便可使用的方案暫無找到npm

思路

基於此，咱們底層引擎用純原生 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);
複製代碼