定制表单排序，react, sort

概要

在实际开发中，我们常常碰到，一个页面根据条件不同，其展示的表单项需要动态改变位置；但是又不想写重复代码；可以试一下以下方法；

效果

使用的技术

• 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方法前，不然会报错