三层网络架构长沙seo推广公司
概要
在实际开发中，我们常常碰到，一个页面根据条件不同，其展示的表单项需要动态改变位置；但是又不想写重复代码；可以试一下以下方法；
效果
使用的技术
- Html
- React,useMemo
- ES6的扩展运算
代码
import React, { Fragment, useMemo } from 'react'export default function DefaultPage() {const testComponent = () => {return <div key={"nationality"}>国籍:<select><option value="1">中国</option><option value="2">美国</option><option value="3">韩国</option></select></div>}const fields = useMemo(() => {return {data: [{id: 1,name: 'name',label: "姓名",type: 'text'},{id: 2,name: 'age',label: "年龄",type: 'text'},{id: 3,name: 'address',label: "地址",type: 'text'}],other: [{id: 4,name: 'email',label: "邮箱",otherComponent: <div>邮箱:<input type='email' /></div>},{id: 6,name: 'phone',label: "电话",otherComponent: <div>电话:<input type='phone' /></div>},],other2: [{id: 7,name: 'nationality',label: "国籍",otherComponent: testComponent()},]}}, [])const defaultFields = [...fields.data, ...fields.other, ...fields.other2]const appointFields = ["age", "nationality", "name"]const defaultSort = defaultFields.sort((a, b) => a.id - b.id)const appointSortList =()=>{const list = []appointFields.forEach((item) => {const newlist = defaultFields.filter((item2) => item2.name === item)list.push(...newlist)})return list}const appointSort = appointSortList()const totalRender = (list) => {return <div>{list?.map((item) => {if (item.otherComponent) {return item.otherComponent} else {return renderForm(item)}})}</div>}const renderForm = (item) => {return <div key={item.id}>{item.label}:<input type={item.type} name={item.name} key={item.id} /></div>}return (<Fragment>默认排序:{totalRender(defaultSort)}<br/>指定排序:---------------{totalRender(appointSort)}</Fragment>)
}< Fragment >是代替<></>标签，无实际意义。指示提醒这是一大块代码块； useMemo是react中用于缓存计算结果的方法，可以根据依赖，动态刷新缓存值
⚠️testComponent方法要写在useMemo方法前，不然会报错
