阿里跨元件體系的JSON表單渲染引擎FormRender通過 JSON Schema 生成標準 Form，常用於自定義搭建配置介面生成
優勢
支援 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);API
PropTypeRequiredDefaultDescriptionnameStringY$form表單的名稱propsSchemaObjectY{}表單屬性配置 jsonuiSchemaObjectN{}表單 UI 配置 jsonformDataObjectN{}配置資料onChangeFunctionY()=>{}資料更改回調函式onValidateFunctionN()=>{}表單輸入校驗回撥displayTypeStringNcolumn設定表單橫向排列或者縱向排序column/ row
注 1： 設定表單 displayType 為 row 時候，請設定 showDescIcon 為 true，隱藏說明，效果會更好注 2： onChange 方法會用於初始化表單 data，如果不寫會造成沒有初始值的表單元素無法渲染（出現不報錯也不顯示的情況）注 3： FormRender 預設佈局會佔滿它的父級元素，建議用一個div包裹 FormRender 用於表單佈局樣式調整
不常用 API
PropTypeRequiredDefaultDescriptioncolumnNumber1N整體佈局 1 排 N，區域性的 1 排 N 一般使用ui:widthshowValidateBooleanNtrue是否展示校驗資訊showDescIconBooleanNfalse是否將文字形式說明顯示成描述 tooltip 形式widgetsObjectN{}自定義元件mappingObjectN{}用於修改預設元件對映表FieldUIComponentN內建元件用於自定義整個元素的樣式（標籤、結構等）
原理
FormRender 底層引擎用原生 JS 來實現，通過解析 JSON Schema 配置，並支援渲染原生的 HTML 表單，通過 UiSchema 來配置 Widget 元件，在此基礎上處理好上層 Ant Design 或 Fusion 元件 Widget 和 Input Format 的對應關係，最後還可以做到無縫接入其他元件體系的好處
除錯
> git clone https://github.com/alibaba/form-render.git> npm i> npm run start