現在有個項目表單很多，用什麼技術框架合適？

建議回答問題之前把團隊規模寫一下，有很多人回復使用動態表單，那麼製作這個動態表單系統需要多少人，花了多少時間？如何解決一些特殊校驗問題(例如用戶名已存在這種)？系統趕著上線呢？

我們內部基於 React 寫了一套動態表單，業務上有 100 多個表單，每天從這裡發出 23W 的內容量，表單聯動我們設計了一套機制，完全由後端控制的，因此前端只開發了一套引擎組件和 20 個表單組件，React 挺好用啊。

既然問題描述被 @王宇鵬 修改增加了，那我補充下這個動態表單。

首先表單組件很多是現成的，公司內部有類似 Antd 的一套基礎組件，基於這套基礎組件我們擴展了一套業務表單組件，這些表單組件都按照一定表單規範開發。之後這些表單組件按照一定的協議拼裝在一起可以形成一張表單，但是這種靜態表單使用場景很有限，它沒法聯動，只能前端校驗，沒法實現用戶名校驗。

為了讓整套表單完全由後端控制，我們設計了一套非同步聯動的機制，簡單的說當某個表單內容變更的時候，可以觸發一個 AJAX 整個表單發送給後端介面，後端進行業務邏輯校驗並標記報錯或者取消掉之前的報錯，進而刷新整個表單。藉助 React 的渲染能力和組件，這一切十分絲滑。

表單組件另算，動態表單引擎 1.0，一個前端 4 天開發完成，表單引擎整個重寫 2.0，我花了一周多一點。

系統趕著上線，所以才更要做這一套東西，因為我們評估下來系統上線會立馬生成大量表單（其實很快就有幾十個表單），你可以選擇我硬編碼趕緊搞一個表單應對當前需求，不過估計你已經累死了。

如圖，除了我廠的 AntD 外，Mozilla 的 Form 也非常不錯，我們後台很多程序在用的就是這個react-jsonschema-form playground，文檔非常豐富且很好擴展。雖然我個人非常喜歡並且樂意造輪子，此前也造過3套 Web Form 和 1 套 iOS Native Form 的輪子，但是在 React 上還是非常推薦使用這款線程的表單組件。

數據大綱 Schema

我們都知道如果想生成一個單項/雙向數據綁定的表單，首先需要一個數據大綱，即定義表單的標題、屬性欄位的類型、默認值、校驗規則、候選枚舉項等。數據的大綱通常是統一定義在服務端的，每個廠都有自己的實現方式，但是我猜都可以輕鬆映射成 react-jsonschema-form 要求的格式：

const schema = {
type: "object",
properties: {
foo: {
type: "object",
properties: {
bar: {type: "string"}
}
},
baz: {
type: "array",
items: {
type: "object",
properties: {
description: {
"type": "string"
}
}
}
}
}
}


上面的 json 對於前後端開發人員都應該很容易理解吧。

界面大綱 UI Schema

接下來就是定義 UI 大綱，包括欄位的編輯器類型、輔助說明、幫助提示等：

const uiSchema = {
foo: {
bar: {
"ui:widget": "textarea"
},
},
baz: {
// note the "items" for an array
items: {
description: {
"ui:widget": "textarea"
}
}
}
}


編輯器 Widgets

react-jsonschema-form 支持的 widget 類型（可以理解成編輯器類型）包括：

• Boolean 值
• radio
• select
• checkbox

• 數值
• updown selector
• range slider

• 文本值
• textarea
• password
• color

• 其他常用值
• email
• uri
• date and date-time

• 單選及多選
• select
• checkboxes

最後的組裝

在你的 React 最中引入 Form 十分簡單：

import React, { Component } from "react";