配置化表單FormRender初嘗試

作者：大轉轉FE 2022-11-03 09:01:52

基于JSON schema 的協議規范。JSON schema 作為 JSON 數據校驗表述的國際標準，主要用于表單數據的服務端校驗。已經接入JSON Schema標準的團隊可以幾乎無縫接入 FR。

然而，我找到了一個非常好用的表單插件,就是通過下發JSON配置來生成表單視圖的方法！！！！

它就是 FormRender ，一站式中后臺表單解決方案。

它有什么優點？

支持 Ant Design 和 Fusion Design 主流的視覺主題
使用JSON Schema 標準協議描述表單配置，并搭配豐富類型且可擴展的組件
支持 1 排 N、支持對象無限嵌套、自定義正則校驗、自定義樣式組件、列表拖拽等特性
已在飛豬、亞博科技、安全智能、淘寶、新零售行業工作臺、人工智能實驗室、天貓等多場景使用，可支持復雜場景使用
維護上有專人支持

香不香？我反正已經上手使用過了，是真的香！遇到這種靈活多變的表單配置化需求，一個輸入框和select都甚至需要封裝成一個組件，寫完一個組件，就要在components增加一個文件夾，要是用了這個插件，一些基礎的組件可以直接用，要是不滿足你的需求的話，也可以自定義組件（有這種類似場景的同學看過來，福利啊）

再講一下這個插件的缺點

插件誕生也就兩三年，可能會有一些bug，這是難免的文檔不是很全待發現... 但我目前用下來是沒啥大問題的

那么大家就會問呢？

實際開發復雜度有多高？

能支持復雜場景么？能支持聯動么？

能支持多樣化的定制需求么？

當然答案都是肯定的，接下來帶大家體驗一下

設計方案

協議層定義協議（schema）配置，展示層控制協議的渲染，工具層提供上下游的進一步支持。在此之上，FR 遵循如下的 api 設計：

極簡的組件 api:

// 可控的input
<input value={value} notallow={onChange} />
// form-render, 只多了schema，用于描述 Form 長什么樣
<FormRender formData={value} notallow={onChange} schema={schema} />

這樣的設計下，FR 只負責管理和改動表單數據/時時校驗，而將具體如何使用表單數據和校驗信息乃至提交的方式全權交給了使用者自由書寫。

支持復雜聯動:

"showMore": {
  "title": "顯示更多",
  "type": "boolean"
},
"input1": {
  "title": "輸入框1",
  "type": "string",
  "hidden": "{{rootValue.showMore === false}}" // 當showMore值為false時，隱藏
}。

支持個性化擴展：當出現現有表單元素無法滿足需求的場景，FR 使用自定義組件的方式，讓用戶自由擴展 FR 的組件庫。

備注：自定義組件就是普通的React組件，唯一的要求是要有 value/onChange 這兩個 props，用于雙向綁定值。所以如果現成的組件已經默認使用了 value/onChange,就可以直接拿來用。

// 寫自定義組件
const MyInput = ({ value, onChange }) => {
  return <input value={value} notallow={(e) => onChange(e.target.value)} />;
};
// 傳入自定義組件
<FormRender {...props} widgets={{ myInput: MyInput }} />;

協議上只需指明"widget": "MyInput"，即可使用對應的組件來渲染：

text: {
  title: "你好",
  type: "string",
  "widget": "myInput"
}

一句話總結，基于 JSON schema 的協議確保了 FR 的規范性，可控組件的模型確保了外層 api 的簡潔和解耦，聯動&自定義組件的 api 確保了對大量復雜的場景的很好支持。

下面我來談談小伙伴們最關心的實際使用體感吧。

使用體驗 & 流程

安裝：

FormRender 依賴 ant design，單獨使用不要忘記同時安裝 antd

npm i form-render --save

最簡demo

import React from 'react';
import { Button } from 'antd';
import FormRender, { useForm } from 'form-render';

const schema = {
  type: 'object',
  properties: {
    input1: {
      title: '簡單輸入框',
      type: 'string',
      required: true,
    },
    select1: {
      title: '單選',
      type: 'string',
      enum: ['a', 'b', 'c'],
      enumNames: ['早', '中', '晚'],
    },
  },
};

const Demo = () => {
  const form = useForm();
  const onFinish = (formData, errors) => {
    console.log('formData:', formData, 'errors', errors);
  };
  return (
    <div>
      <FormRender form={form} schema={schema} notallow={onFinish} />
      <Button type="primary" notallow={form.submit}>
        提交
      </Button>
    </div>
  );
};

export default Demo;

從 demo 中我們不難發現 FormRender 的一些設計：

以 schema 來描述表單展示，提交方式與 antd v4 的方式類似。
schema 以國際標準的 JSON schema 為基礎，同時能夠方便使用任何 antd 的 props。
通過bind字段，我們允許數據的雙向綁定，數據展示和真實提交的數據可以根據開發需求不同（例如從服務端接口拿到不規則數據時，也能直接使用）。
使用{{...}}書寫表達式來完成簡單的聯動，值得一提的是，這里表達式支持所有 js 語法。FR 還提供自定義組件、dependencies 聲明、watch 等工具用于更加復雜的定制。
可以通過displayType，labelWidth等字段輕易修改展示。

通過使用 schema 編輯器，生成一個表單的流程非常簡單，有興趣的同學可以按下面示例在線嘗試一下，體會它的強大性：