欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于react hooks,zarm組件庫配置開發(fā)h5表單頁面的實例代碼

 更新時間:2021年04月06日 10:02:08   作者:記憶的森林  
這篇文章主要介紹了基于react hooks,zarm組件庫配置開發(fā)h5表單頁面,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

最近使用React Hooks結合zarm組件庫,基于js對象配置方式開發(fā)了大量的h5表單頁面。大家都知道h5表單功能無非就是表單數(shù)據的收集,驗證,提交,回顯編輯,通常排列方式也是自上向下一行一列的方式顯示 , 所以一開始就考慮封裝一個配置化的頁面生成方案,目前已經有多個項目基于此方式配置開發(fā)上線,思路和實現(xiàn)分享一下。

使用場景

任意包含表單的h5頁面(使用zarm庫,或自行適配自己的庫)

目標

  • 代碼實現(xiàn)簡單和簡潔
  • 基于配置
  • 新手上手快,無學習成本
  • 老手易擴展和維護

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

form-render或思路一些缺陷

1.我的目標是h5, form-remder目前僅僅是pc后臺表單配置方案,提供了antd和fusion主題,默認不支持h5

2.form-render 支持擴展組件,內部維護了一個映射表 mapping, 映射了數(shù)據類型和組件的映射關系,比如antd主題各數(shù)據類型和antd組件的映射關系如下,如果我有一套自己的/第三方公司統(tǒng)一使用的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',
};

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

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={formData} onChange={setFormData} />
 );
};

export default Demo1;

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

javascript object 方案

所以以阿里form-render 等以json配置實現(xiàn)動態(tài)渲染的方案不能滿足 簡單,快速,突破,共贏的碼農生存準則, 如果把json換成javascript object , 那配置和擴展的能力就不一樣了, 這里我們還是借用form-render的總體思路,但是將type從string,number,boolean,array,object,html等數(shù)據類型換成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 = [
 {
  type: Input,
  label: '被保人姓名',
  placeholder: '請?zhí)顚?,
  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: '請?zhí)顚?,
  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={layoutData} data={data} setData={setData} />
  <Button block theme="primary" onClick={() => Toast.show(JSON.stringify(data))}>
  確定
  </Button>
 </div>
 );
}

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

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

// 對于無法配置(比如自定義組件,需要根據條件顯示的組件等)的情況, 請使用render方法,
// getJSON() 動態(tài)返回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={it.value} key={idx1}>
    {it.label}
   </Radio>
   ));
  }

  props.value = 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; // 動態(tài)返回Item配置
 elProps?: object; // 組件的props配置 , 比如type為Input, elProps則會配置到Input
 cellProps?: object; // cell props配置
}
export interface Props {
 layoutData: Array<Item>; // 表單布局配置
 data: object; // 數(shù)據存儲,name作為key,內容為value
 setData: () => void; // 數(shù)據更新
}
interface FormRenderer extends React.FC<Props> {}
declare const FormRenderer: FormRenderer;
export default FormRenderer;

上述代碼效果如下

這種方式唯一缺點是無法像json一樣持久化存儲在數(shù)據庫 ,優(yōu)點是可以統(tǒng)一移動和pc端表單配置式開發(fā),少了大量的樣板代碼和嵌套,可以統(tǒng)一處理數(shù)據的存取和驗證,表單項的排列方式 。

到此這篇關于基于react hooks,zarm組件庫配置開發(fā)h5表單頁面的文章就介紹到這了,更多相關react hooks,zarm組件庫內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 詳解React native全局變量的使用(跨組件的通信)

    詳解React native全局變量的使用(跨組件的通信)

    本篇文章主要介紹了詳解React native全局變量的使用(跨組件的通信),具有一定的參考價值,有興趣的同學可以了解一下
    2017-09-09
  • React Native 真機斷點調試+跨域資源加載出錯問題的解決方法

    React Native 真機斷點調試+跨域資源加載出錯問題的解決方法

    下面小編就為大家分享一篇React Native 真機斷點調試+跨域資源加載出錯問題的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-01-01
  • React中的常用Hooks分享

    React中的常用Hooks分享

    React?提供了許多常用的?Hooks,用于在函數(shù)組件中添加狀態(tài)管理、副作用處理和其他功能,本文主要介紹了其中幾個常用的,需要的可以收藏一下
    2023-07-07
  • 詳解React中合并單元格的正確寫法

    詳解React中合并單元格的正確寫法

    用表格進行頁面布局,頁面布局在各種瀏覽器的的兼容性, 本文主要介紹了詳解React中合并單元格的正確寫法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • react基礎知識總結

    react基礎知識總結

    這篇文章主要介紹了react常用的基礎知識總結,幫助大家更好的理解和學習使用react框架,感興趣的朋友可以了解下
    2021-04-04
  • React報錯Type '() => JSX.Element[]' is not assignable to type FunctionComponent

    React報錯Type '() => JSX.Element[]&apos

    這篇文章主要為大家介紹了React報錯Type '() => JSX.Element[]' is not assignable to type FunctionComponent解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-12-12
  • react反向代理使用http-proxy-middleware問題

    react反向代理使用http-proxy-middleware問題

    這篇文章主要介紹了react反向代理使用http-proxy-middleware問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • 淺談React和Redux的連接react-redux

    淺談React和Redux的連接react-redux

    本篇文章主要介紹了淺談React和Redux的連接react-redux,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • Electron整合React使用搭建開發(fā)環(huán)境的步驟詳解

    Electron整合React使用搭建開發(fā)環(huán)境的步驟詳解

    這篇文章主要介紹了Electron整合React使用搭建開發(fā)環(huán)境,本文分步驟給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2020-06-06
  • React狀態(tài)更新的優(yōu)先級機制源碼解析

    React狀態(tài)更新的優(yōu)先級機制源碼解析

    這篇文章主要為大家介紹了React狀態(tài)更新的優(yōu)先級機制源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11

最新評論