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

它就是 FormRender ，一站式中后臺(tái) 表單解決方案。

它有什么優(yōu)點(diǎn)？

• 支持 Ant Design 和 Fusion Design 主流的視覺主題
• 使用JSON Schema 標(biāo)準(zhǔn)協(xié)議描述表單配置，并搭配豐富類型且可擴(kuò)展的組件
• 支持 1 排 N、支持對(duì)象無限嵌套、自定義正則校驗(yàn)、自定義樣式組件、列表拖拽等特性
• 已在飛豬、亞博科技、安全智能、淘寶、新零售行業(yè)工作臺(tái)、人工智能實(shí)驗(yàn)室、天貓等多場(chǎng)景使用，可支持復(fù)雜場(chǎng)景使用
• 維護(hù)上有專人支持

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

再講一下這個(gè)插件的缺點(diǎn)

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

那么大家就會(huì)問呢？

實(shí)際開發(fā)復(fù)雜度有多高？

能支持復(fù)雜場(chǎng)景么？能支持聯(lián)動(dòng)么？

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

當(dāng)然答案都是肯定的，接下來帶大家體驗(yàn)一下

設(shè)計(jì)方案

協(xié)議層定義協(xié)議（schema）配置，展示層控制協(xié)議的渲染，工具層提供上下游的進(jìn)一步支持。在此之上，F(xiàn)R 遵循如下的 api 設(shè)計(jì)：

基于JSON schema 的協(xié)議規(guī)范。JSON schema 作為 JSON 數(shù)據(jù)校驗(yàn)表述的國(guó)際標(biāo)準(zhǔn)，主要用于表單數(shù)據(jù)的服務(wù)端校驗(yàn)。已經(jīng)接入JSON Schema標(biāo)準(zhǔn)的團(tuán)隊(duì)可以幾乎無縫接入 FR。

極簡(jiǎn)的組件 api:

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

這樣的設(shè)計(jì)下，F(xiàn)R 只負(fù)責(zé)管理和改動(dòng)表單數(shù)據(jù)/時(shí)時(shí)校驗(yàn)，而將具體如何使用表單數(shù)據(jù)和校驗(yàn)信息乃至提交的方式全權(quán)交給了使用者自由書寫。

支持復(fù)雜聯(lián)動(dòng):

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

支持個(gè)性化擴(kuò)展： 當(dāng)出現(xiàn)現(xiàn)有表單元素?zé)o法滿足需求的場(chǎng)景，F(xiàn)R 使用自定義組件的方式，讓用戶自由擴(kuò)展 FR 的組件庫。

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

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

協(xié)議上只需指明"widget": "MyInput"，即可使用對(duì)應(yīng)的組件來渲染：

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

一句話總結(jié)，基于 JSON schema 的協(xié)議確保了 FR 的規(guī)范性，可控組件的模型確保了外層 api 的簡(jiǎn)潔和解耦，聯(lián)動(dòng)&自定義組件的 api 確保了對(duì)大量復(fù)雜的場(chǎng)景的很好支持。

下面我來談?wù)勑』锇閭冏铌P(guān)心的實(shí)際使用體感吧。

使用體驗(yàn) & 流程

安裝：

FormRender 依賴 ant design，單獨(dú)使用不要忘記同時(shí)安裝 antd

npm i form-render --save

最簡(jiǎn)demo

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

const schema = {
  type: 'object',
  properties: {
    input1: {
      title: '簡(jiǎn)單輸入框',
      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 中我們不難發(fā)現(xiàn) FormRender 的一些設(shè)計(jì)：

• 以 schema 來描述表單展示，提交方式與 antd v4 的方式類似。
• schema 以國(guó)際標(biāo)準(zhǔn)的 JSON schema 為基礎(chǔ)，同時(shí)能夠方便使用任何 antd 的 props。
• 通過bind字段，我們?cè)试S數(shù)據(jù)的雙向綁定，數(shù)據(jù)展示和真實(shí)提交的數(shù)據(jù)可以根據(jù)開發(fā)需求不同（例如從服務(wù)端接口拿到不規(guī)則數(shù)據(jù)時(shí)，也能直接使用）。
• 使用{{...}}書寫表達(dá)式來完成簡(jiǎn)單的聯(lián)動(dòng)，值得一提的是，這里表達(dá)式支持所有 js 語法。FR 還提供自定義組件、dependencies 聲明、watch 等工具用于更加復(fù)雜的定制。
• 可以通過displayType，labelWidth等字段輕易修改展示。

通過使用 schema 編輯器，生成一個(gè)表單的流程非常簡(jiǎn)單，有興趣的同學(xué)可以按下面示例在線嘗試一下，體會(huì)它的強(qiáng)大性：

• 使用 在線 schema 編輯器 搭建表單，導(dǎo)出 schema
• 將 schema 作為props傳入<FormRender {...schema} />組件 在線（demo中替換 schema.json 文件內(nèi)容即可）。

在原有的基礎(chǔ)組件支撐下，我們需要一個(gè)復(fù)雜聯(lián)動(dòng)的自定義組件，如圖：

當(dāng)時(shí)在封裝這個(gè)自定義組件時(shí)遇到的一個(gè)小坑：

如上圖標(biāo)注，組件只掛載了一次，導(dǎo)致給自定義組件傳的recycleLinkCode，剛開始拿到的初始值是空，但是組件已經(jīng)掛載完了，等到接口返回recycleLinkCode的值時(shí)，傳過去的數(shù)據(jù)沒有實(shí)時(shí)更新。

官方給出的理由是： formData的更新才會(huì)觸發(fā)表單的重新渲染，但是recycleLinkCode不是表單值，所以不能用form.setValues和form.setValueByPath來修改表單值

解決辦法：

接口拿到數(shù)據(jù)之后再去加載組件；

觸發(fā)組件重新渲染，可以試試這樣寫：useMemo(()=>,[recycleLinkCode])。

寫在最后

總體來說這個(gè)插件已經(jīng)很 nice 了，可以滿足一般表單基本的需求。使用拖拽形式，也完全可以交給產(chǎn)品運(yùn)營(yíng)同學(xué)直接進(jìn)行表單配置組合。