介紹

form-render是阿里開源的跨元件體系的表單渲染引擎 - 通過 JSON Schema 快速生成自定義表單配置介面，常用於自定義搭建配置介面生成。

Githubhttp://127.0.0.1/vhost/conf/img_echo.php?w=640&h=323&src=https://alibaba.github.io/form-render/#/安裝npm i form-render -Simport 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常用APIform-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即可，如果你想用它來做一些有意思的東西，不妨嘗試一番！