基于react hooks,zarm組件庫配置開發h5表單頁面-有解無憂

最近使用React Hooks結合zarm組件庫，基于js物件配置方式開發了大量的h5表單頁面，大家都知道h5表單功能無非就是表單資料的收集，驗證，提交，回顯編輯，通常排列方式也是自上向下一行一列的方式顯示，所以一開始就考慮封裝一個配置化的頁面生成方案，目前已經有多個專案基于此方式配置開發上線，思路和實作分享一下，

使用場景

任意包含表單的h5頁面（使用zarm庫，或自行適配自己的庫）

目標

代碼實作簡單和簡潔
基于配置
新手上手快，無學習成本
老手易擴展和維護

寫之前參考了市面上的一些方案，大多都是通過定義json schema方式定義一套格式，比如阿里的form-render ,通過 JSON Schema定義表單，有可視化編輯器配置，匯出json檔案，動態渲染，凡此種種，無出其外，這里就以阿里form-render為代表，談談它的一些缺陷 (優點自行參考官網宣傳)

form-render或思路一些缺陷

我的目標是h5， form-remder目前僅僅是pc后臺表單配置方案，提供了antd和fusion主題，默認不支持h5
form-render 支持擴展組件，內部維護了一個映射表 mapping，映射了資料型別和組件的映射關系,比如antd主題各資料型別和antd組件的映射關系如下,如果我有一套自己的/第三方公司統一使用的h5組件庫，需要自己去配置擴展,比較麻煩，

// 例如在antd下映射如下：
export const mapping = {
  default: 'input',
  string: 'input',
  array: 'list',
  boolean: 'checkbox',
  integer: 'number',
  number: 'number',
  object: 'map',
  html: 'html',
  'string:upload': 'upload',
  'string:date': 'date',
  'string:dateTime': 'date',
  'string:time': 'date',
  'string:textarea': 'textarea',
  'string:color': 'color',
  'string:image': 'input',
  'string:email': 'input',
  'string:url': 'url',
  'range:date': 'dateRange',
  'range:dateTime': 'dateRange',
  '*?enum': 'select',
  'array?enum': 'checkboxes',
};

如果用過/開發過 form-render 等基于json schema的工具，有一個需求處理比較麻煩，比如表單欄位聯動處理， form-render 提供了有限的幾個聯動屬性，ui:options,ui:disabled,ui:hidden等，這樣算下來，除了需要掌握form-render定義的資料型別，資料型別主題組件映射,及組件關聯的各種屬性，還要背下額外的聯動屬性，不外乎多學了一門新編程的復雜程度，所以需要可視化界面輔助編輯，

import React, { useState } from 'react';
import FormRender from 'form-render/lib/antd';

const schema = {
  type: 'object',
  properties: {
    select: {
      title: '單選',
      type: 'string',
      enum: ['a', 'b'],
      enumNames: () => ['顯示輸入框', '隱藏輸入框'],
      'ui:disabled': (formData, rootValue) => rootValue.input1.length > 5,
      'ui:widget': 'radio',
    },
    input1: {
      title: '輸入框',
      description: '嘗試輸入超過5個字符',
      type: 'string',
      'ui:hidden': (formData, rootValue) => formData.select === 'b',
    },
  },
};

const Demo1 = () => {
  const [formData, setFormData] = useState({});
  return (
    <FormRender schema={schema} formData=https://www.cnblogs.com/leonwang/archive/2021/04/05/{formData} onChange={setFormData} />
  );
};

export default Demo1;

這種配置的json適合非開發人員快速懟出表單功能，但是不適合開發人員開發擴展，比如我要在兩個輸入框中間放個圖文混排的東西. （另行開發一個自定義組件掛載？）

javascript object 方案

所以以阿里form-render 等以json配置實作動態渲染的方案不能滿足簡單，快速，突破，共贏的碼農生存準則，如果把json換成javascript object , 那配置和擴展的能力就不一樣了, 這里我們還是借用form-render的總體思路，但是將type從string,number,boolean,array,object,html等資料型別換成Function，一個Function就是一個React組件，比如antd-mobile ,zarm 的Input組件,因為本文基于zarm, 后面都基于zarm展開（對antd-mobile ，vue等第三方移動端/pc端同樣適用），例如下面的配置

import React, { useState, useEffect } from 'react';
import FormRenderer from 'zarm-form-render';
import { Input, Cell, Radio, Select, DateSelect, Button, Toast, Panel } from 'zarm';

export default function App() {
  const [data, setData] = useState({});

  const layoutData = https://www.cnblogs.com/leonwang/archive/2021/04/05/[
    {
      type: Input,
      label: '被保人姓名',
      placeholder: '請填寫',
      name: 'name',
    },
    {
      type: Radio.Group,
      label: '性別',
      name: 'gender',
      elProps: {
        type: 'button',
        ghost: true,
      },
      items: [
        { label: '男', value: 'male' },
        { label: '女', value: 'female' },
      ],
    },
    {
      render() {
        if (!data.gender) return null;
        return <Cell title="你是" description={data.gender === 'male' ? '男生' : '女生'}></Cell>;
      },
    },
    {
      type: Select,
      label: '愛吃的水果',
      name: 'favfood',
      elProps: {
        dataSource: [
          { label: 'apple', value: 'apple' },
          { label: 'banana', value: 'banana' },
        ],
      },
    },

    {
      type: DateSelect,
      label: '出生日期',
      title: '被保人出生日期',
      placeholder: '請選擇',
      name: 'birthday',
      min: '1900-01-01',
    },
    {
      type: Input,
      label: '手機號',
      placeholder: '請填寫',
      name: 'mobile',
    },
    {
      render() {
        return <div style={{ margin: '30px 6px',}}></div>;
      },
    },
    {
      render() {
        return (
          <Panel title="你錄入的內容">
            <div style={{ margin: '10px 6px' }}>{JSON.stringify(data)}</div>
          </Panel>
        );
      },
    },
  ];

  return (
    <div>
      <FormRenderer layoutData=https://www.cnblogs.com/leonwang/archive/2021/04/05/{layoutData} data=https://www.cnblogs.com/leonwang/archive/2021/04/05/{data} setData=https://www.cnblogs.com/leonwang/archive/2021/04/05/{setData} />
      <Button block theme="primary" onClick={() => Toast.show(JSON.stringify(data))}>
        確定
      </Button>
    </div>
  );
}

一個表單由一個陣列定義，物件type為要渲染的組件, name為收集資料的key,其他屬性定義組件其他的props，基于哪個庫，則參考相關庫的組件API檔案配置即可，對于一些特殊的/不存在的組件我們定義render函式動態渲染，然后就沒有其他的了，全部是你熟悉的React，最終我們可以定義一個自己的FormRender 接受一個一維陣列用于從上往下排串列單項( 用render 不限于表單項，你可以render任意內容)，一個data用于資料收集，一個setData用于資料更新 (源自React Hooks useState)，就這么簡單，原始碼如下

import React from 'react';
import { Cell, Radio, DateSelect, Select } from 'zarm';

// 對于無法配置(比如自定義組件，需要根據條件顯示的組件等)的情況， 請使用render方法，
// getJSON() 動態回傳json
// render()  自定義render

export default function FormRenderer({ layoutData, data, setData }) {
  const onFiledChange = (name, value) => {
    let v = value;

    // for Select ctrl
    if (Array.isArray(value)) {
      v = value.map((item) => item.value)[0];
    }

    setData({ ...data, [name]: v });
  };

  const onChangeFactory = (name) => (value) => onFiledChange(name, value);

  return (
    <div className="renderer">
      {layoutData.map((item, idx) => {
        if (typeof item.getJSON === 'function') {
          item = item.getJSON();
        }
        if (typeof item !== 'object' || !item) return null;
        const {
          name,
          type,
          description,
          items,
          elProps = {},
          cellProps = {},
          render,
          ...props
        } = item;

        if (typeof render === 'function') {
          return render();
        }

        let children = [];
        if (Array.isArray(items) && type === Radio.Group) {
          children = items.map((it, idx1) => (
            <Radio value=https://www.cnblogs.com/leonwang/archive/2021/04/05/{it.value} key={idx1}>
              {it.label}
            </Radio>
          ));
        }

        props.value = https://www.cnblogs.com/leonwang/archive/2021/04/05/data[name];
        props.onChange = onChangeFactory(name);

        if (type === Select) {
          props.dataSource = items;
        }
        if (type === DateSelect || type === Select) {
          props.onOk = props.onChange;
          delete props.onChange;
          props.onChange = elProps.onChange;
        }

        return (
          <Cell key={idx} title={item.label} description={description} {...cellProps} name={name}>
            {React.createElement(type, { ...props, ...elProps }, ...children)}
          </Cell>
        );
      })}
    </div>
  );
}

配置說明

import * as React from 'react';
export interface Item {
  type: React.Component; // 組件型別， 比如Input 等
  name: string; // key
  items?: Array<any>; // dataSource
  description: string; // Cell description
  label?: string; // Cell title
  render?: () => React.ReactNode; //自定義 render
  getJSON?: () => object | null; // 動態回傳Item配置
  elProps?: object; // 組件的props配置 , 比如type為Input, elProps則會配置到Input
  cellProps?: object; // cell props配置
}
export interface Props {
  layoutData: Array<Item>; // 表單布局配置
  data: object; // 資料存盤,name作為key,內容為value
  setData: () => void; // 資料更新
}
interface FormRenderer extends React.FC<Props> {}
declare const FormRenderer: FormRenderer;
export default FormRenderer;

上述代碼效果如下

這種方式唯一缺點是無法像json一樣持久化存盤在資料庫，優點是可以統一移動和pc端表單配置式開發，少了大量的樣板代碼和嵌套，可以統一處理資料的存取和驗證, 表單項的排列方式，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/272776.html

標籤：其他

上一篇：一款輕閱讀應用ReadIT，記錄我的RN躺坑之旅

下一篇：瀏覽器+css基礎+選擇器+權重+匹配規則