当前位置： 首页 > news >正文

定制表单排序，react, sort

news 来源：原创 2025/7/21 11:40:18

概要

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

效果

在这里插入图片描述

使用的技术

  • 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方法前，不然会报错
在这里插入图片描述

相关文章：

定制表单排序，react, sort

概要 在实际开发中&#xff0c;我们常常碰到&#xff0c;一个页面根据条件不同&#xff0c;其展示的表单项需要动态改变位置&#xff1b;但是又不想写重复代码&#xff1b;可以试一下以下方法&#xff1b; 效果 使用的技术 HtmlReact,useMemoES6的扩展运算 代码 import Re…...

编程日记 2025/7/21 11:40:18

Vue3中keep-alive缓存组件应用场景。

文章目录 一、KeepAlive是什么&#xff1f;二、基本使用1.例子2.keep-alive使用 三、其他属性3.1 包含/排除3.2 最大缓存实例数3.3 缓存实例的生命周期 总结 一、KeepAlive是什么&#xff1f; 是一个内置组件&#xff0c;它的功能是在多个组件间动态切换时缓存被移除的组件实例…...

编程日记 2025/7/16 23:09:20

测试用例`

1.什么是测试用例 测试⽤例&#xff08;Test Case&#xff09;是为了实施测试⽽向被测试的系统提供的⼀组集合&#xff0c;这组集合包含&#xff1a;测试环境、操作步骤、测试数据、预期结果等要素. 2.测试用例的万能公式(重点) 设计测试⽤例的万能公式&#xff1a; 功能测试界…...

编程日记 2025/7/21 11:37:49

React 中的错误边界（Error Boundaries），如何使用它们捕获组件错误

大白话React 中的错误边界&#xff08;Error Boundaries&#xff09;&#xff0c;如何使用它们捕获组件错误 在 React 里&#xff0c;错误边界就像是一个“小卫士”&#xff0c;专门负责在组件出现错误时挺身而出&#xff0c;避免整个应用因为一个小错误就崩溃掉。接下来我会详…...

编程日记 2025/7/21 8:34:58

往期项目shader着色器实践效果应用合集

1、管路混色 2、水管水流效果 3、水管流入到流完效果 4、加热冷却 两 色混色 示意 XX、毒蘑菇测试效果...

编程日记 2025/6/28 4:52:58

go-zero: sqlx 对timestamp 格式数据问题

1.问题背景 对于goctl自动生成的model代码文件&#xff0c;对于非null的时间数据列&#xff0c;一定会产生如下问题 deleted_at\": unsupported Scan, storing driver.Value type \u003cnil\u003e into type *time.Time" 例如以上的问题&#xff0c;不论是插入还…...

编程日记 2025/7/15 14:14:41

systemd-networkd 的 *.network 配置文件详解 笔记250323

systemd-networkd 的 *.network 配置文件详解 笔记250323 查看官方文档可以用 man systemd.network命令, 或访问: https://www.freedesktop.org/software/systemd/man/latest/systemd.network.html 名称 systemd.network — 网络配置 概要 network.network 描述 一个纯…...

编程日记 2025/7/19 8:22:49

Axure项目实战：智慧城市APP（四）医疗信息（动态面板、选中交互应用）

亲爱的小伙伴&#xff0c;在您浏览之前&#xff0c;烦请关注一下&#xff0c;在此深表感谢&#xff01; 课程主题&#xff1a;智慧城市APP医疗信息模块 主要内容&#xff1a;医疗信息模块原型设计与交互 应用场景&#xff1a;医疗信息行业 案例展示&#xff1a; 案例视频&…...

编程日记 2025/7/17 4:53:34

机器学习正则化技术：Ridge、Lasso与ElasticNet全解析

机器学习中的正则化技术 在机器学习中&#xff0c;正则化技术&#xff08;如 Ridge 和 Lasso&#xff09;主要用于解决过拟合问题&#xff0c;通过限制模型复杂度提高泛化能力。以下是详细说明及实例代码&#xff1a; 一、正则化解决的问题 过拟合&#xff1a;模型在训练集表…...

编程日记 2025/7/14 16:24:43

【汽车传感系统架构：借助传感获取安全】

为了将车辆自动化提升到一个新的水平&#xff0c;设计人员研究了 LiDAR 等传感器选项的权衡&#xff0c;并着眼于传感系统架构。 本文引用地址&#xff1a;https://www.eepw.com.cn/article/202503/468584.htm 每年&#xff0c;约有 120 万人死于道路交通事故&#xff0c;还有…...

编程日记 2025/7/20 6:18:58

3.25-2request库

request库 一、介绍request库 &#xff08;1&#xff09;requests是用python语言编写的简单易用的http库&#xff0c;用来做接口测试的库&#xff1b; &#xff08;2&#xff09;接口测试自动化库有哪些&#xff1f; requests、urllib 、urllib2、urllib3、 httplib 等&…...

编程日记 2025/7/17 14:46:18

LangChain4j（1）：初识LangChain4j

1 什么是LangChain和LangChain4j LangChain是一个大模型的开发框架&#xff0c;使用LangChain框架&#xff0c;程序员可以更好的利用大模型的能力&#xff0c;大大提高编程效率。如果你是一个lava程序员&#xff0c;那么对LangChain最简单直观的理解就是&#xff0c;LangChain…...

编程日记 2025/7/16 23:54:47

UMI-OCR Docker 部署

额外补充 Docker 0.前置条件 部署前&#xff0c;请检查主机的CPU是否具有AVX指令集 lscpu | grep avx 输出如下即可继续部署 Flags: ... avx ... avx2 ... 1.下载dockerfile wget https://raw.githubusercontent.com/hiroi-sora/Umi-OCR_runtime_linux/main/Do…...

编程日记 2025/7/19 5:07:22

python每日十题(9)

外存储器的容量一般都比较大&#xff0c;而且大部分可以移动&#xff0c;便于在不同计算机之间进行信息交流。外存储器中数据被读入内存储器后&#xff0c;才能被CPU读取&#xff0c;CPU不能直接访问外存储器。本题答案为A选项。 进程是指一个具有一定独立功能的程序关于某个数…...

编程日记 2025/7/16 15:58:37

Jenkins最新版，配置Gitee私人令牌和Gitee凭证

jenkins 配置Gitee私人令牌和凭证 jenkins 版本&#xff1a;Jenkins 2.492.2 Gitee配置 Jenkins配置gitee插件&#xff0c;需要先申请gitee私钥。 安装gitee插件 申请Gitee私人令牌&#xff0c;后面还需要添加凭证。 测试链接&#xff0c;并保存 配置凭证...

编程日记 2025/7/18 9:28:11

AI 生成内容（AIGC）：从文本到视频的完整流程

近年来&#xff0c;AI 生成内容&#xff08;AIGC, AI-Generated Content&#xff09; 迅速发展&#xff0c;从文本、图片到音频、视频&#xff0c;AI 在创意内容生成方面展现出了惊人的能力。AIGC 不仅提升了内容创作效率&#xff0c;还降低了成本&#xff0c;使得普通用户也能…...

编程日记 2025/7/20 5:19:27

【漏洞复现】Apache Tomcat partial PUT文件上传反序列化漏洞复现（CVE-2025-24813）

❤️博客主页&#xff1a; iknow181 &#x1f525;系列专栏&#xff1a; 网络安全、 Python、JavaSE、JavaWeb、CCNP &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐评论✍ 0x00 免责声明 本文所述漏洞复现方法仅供安全研究及授权测试使用&#xff1b;任何个人/组织须在合法合规…...

编程日记 2025/7/16 12:38:54

Spring JDBC Template与事务管理：基于XML与注解的实战指南

摘要 本文深入解析Spring JDBC Template与事务管理的核心技术&#xff0c;结合XML配置与注解方式两种主流方案&#xff0c;通过转账案例完整演示数据库操作与事务管理的最佳实践。文章涵盖JDBC Template的核心用法、事务配置语法、常见问题及性能优化建议&#xff0c;帮助开发…...

编程日记 2025/7/17 18:58:16

自动化测试selenium(Java版)

1.准备工作 1.1.下载浏览器 自动化测试首先我们要准备一个浏览器,我们这里使用谷歌(chrome)浏览器. 1.2.安装驱动管理 每一个浏览器都是靠浏览器驱动程序来启动,但是浏览器的版本更新非常快,可能我们今天测试的是一个版本,第二天发布了一个新的版本,那么我们就要重构代码,很…...

编程日记 2025/7/16 21:03:52

【13】Ajax爬取案例实战

目录 一、准备工作 二、爬取目标 三、初步探索&#xff1a;如何判断网页是经js渲染过的&#xff1f; 四、爬取列表页 4.1 分析Ajax接口逻辑 4.2 观察响应的数据 4.3 代码实现 &#xff08;1&#xff09;导入库 &#xff08;2&#xff09;定义一个通用的爬取方法…...

编程日记 2025/7/14 1:21:41

tar包部署rabbitMQ

部署erlang&#xff1a; 有网使用&#xff1a; sudo apt-get update sudo apt-get install libncurses5-dev libncursesw5-dev sudo yum install ncurses-devel 无网使用 tar zxvf ncurses.tar.gz mkdir ncurses cd ncurses-6.3/ ./configure --with-shared --without-debu…...

编程日记 2025/7/19 21:35:29

SpringMVC请求与响应深度解析：从核心原理到高级实践

一、SpringMVC架构与核心组件剖析 SpringMVC是基于Java的MVC设计模型实现的轻量级Web框架&#xff0c;其核心架构围绕前端控制器模式构建。以下是核心组件及其作用&#xff1a; DispatcherServlet 作为前端控制器&#xff0c;所有请求首先到达此处。它负责请求分发、协调组件协…...

编程日记 2025/7/21 2:35:26

CentOS 8 安装 Redis 全流程指南：从基础部署到远程安全配置

一、环境准备 本文以 CentOS 8.5 为例&#xff0c;演示 Redis 的安装、密码设置及远程连接配置。在开始前&#xff0c;请确保&#xff1a; 已通过 SSH 连接至服务器&#xff08;建议使用 Root 权限&#xff09;系统已联网基础工具包已安装&#xff1a;sudo dnf update -y &am…...

编程日记 2025/7/18 4:01:14

【机器学习】使用Python Spark MLlib进行预测模型训练

Spark MLlib 是 Spark 的机器学习 (ML) 库。它的目标是使实用的机器学习变得可扩展且易于使用。从高层次上讲&#xff0c;它提供了以下工具&#xff1a; ML 算法&#xff1a;常见的学习算法&#xff0c;如分类、回归、聚类和协同过滤特征化&#xff1a;特征提取、转换、降维和…...

编程日记 2025/7/18 13:59:29

简单聊聊Oracle和MySQL数据库的区别和使用场景

对于IT的技术人员&#xff0c;MySQL是非常熟悉的开源数据库&#xff0c;在各个行业被广泛应用。但是对于Oracle数据库&#xff0c;很多专业的IT从业人员不太了解&#xff0c;今天就来聊一聊Oracle和MySQL的一些区别。 1. 使用场景 首先MySQL是在各种IT公司或者非IT公司广泛应用…...

编程日记 2025/7/15 1:07:22

qt QOffscreenSurface详解

1、概述 QOffscreenSurface 是 Qt 中用于离屏渲染的一个类。它允许在不直接与屏幕交互的情况下进行 OpenGL 渲染操作&#xff0c;常用于生成纹理、预渲染场景等。通过 QOffscreenSurface&#xff0c;可以在后台创建一个渲染表面&#xff0c;进行绘制操作&#xff0c;并将结果捕…...

编程日记 2025/7/18 1:29:34

【软件测试】：软件测试实战

1. ⾃动化实施步骤 1.1 编写web测试⽤例 1.2 ⾃动化测试脚本开发 common public class AutotestUtils {public static EdgeDriver driver;// 创建驱动对象public static EdgeDriver createDriver(){// 驱动对象已经创建好了 / 没有创建if( driver null){driver new EdgeDr…...

编程日记 2025/7/17 10:19:47

springboot使用netty做TCP客户端

1、服务端文档说明 ## 1. 概述本文档描述了Socket模拟器的通信协议实现细节&#xff0c;包括数据包格式、字节序、编码方式等信息。## 2. 通信基础### 2.1 连接方式 - 协议类型&#xff1a;TCP - 网络层&#xff1a;IPv4 (AddressFamily.InterNetwork) - 传输方式&#xff1a;流…...

编程日记 2025/7/20 15:20:09

【NLP 49、提示工程 prompt engineering】

目录 一、基本介绍 语言模型生成文本的基本特点 提示工程 prompt engineering 提示工程的优势 使用注意事项 ① 安全问题 ② 可信度问题 ③ 时效性与专业性 二、应用场景 能 ≠ 适合 应用场景 —— 百科知识 应用场景 —— 写文案 应用场景 —— 解释 / 编写…...

编程日记 2025/7/19 7:57:55

Axure RP设计软件中的各种函数：包括数字、数学、字符串、时间及中继器函数，详细解释了各函数的用途、参数及其应用场景。

文章目录 引言函数分类数字函数数学函数字符串函数时间函数函数中继器函数引言 在axure交互设计时，函数可以用在条件公式和需要赋值的地方，其基本语法是用双方括号包含，变量值和函数用英文句号连接。 在交互事件编辑器中通过fx按钮插入函数表达式，例如设置文本内容为： …...

编程日记 2025/7/21 10:25:41

Logback使用和常用配置

Logback 是 Spring Boot 默认集成的日志框架&#xff0c;相比 Log4j&#xff0c;它性能更高、配置更灵活&#xff0c;并且天然支持 Spring Profile 多环境配置。以下是详细配置步骤及常用配置示例。 一、添加依赖&#xff08;非 Spring Boot 项目&#xff09; 若项目未使用 Sp…...

编程日记 2025/7/16 5:28:02

赛季7靶场 -- Code -- HTB writeup（Just hint）

本系列仅说明靶场的攻击思路&#xff0c;不会给出任何的详细代码执行步骤&#xff0c;因为个人觉得找到合适的工具以实现攻击思路的能力也非常重要。 1.首先我们对靶场进行了Nmap扫描&#xff0c;很快我们发现了Web应用端口何SSH端口 2.显然我们无法直接突破ssh&#xff0c;因为…...

编程日记 2025/7/14 19:18:53

第十三届蓝桥杯单片机省赛程序设计试题

目录 试题 各程序块代码 init.c main.c other.h other.c key.c seg.c onewire.c部分 ds1302.c部分 试题 各程序块代码 init.c #include "other.h"void init74hc138(unsigned char n){P2(P2&0x1f)|(n<<5);P2&0x1f; } void init(){P00x00;in…...

编程日记 2025/7/19 6:10:10

【QT】Qt creator快捷键

Qt creator可以通过以下步骤快捷键査看调用关系&#xff1a; 1.打开代码文件。 2.将光标放在你想要查看调用关系的函数名上。 3.按下键盘快捷键 CtrlshiftU。 4.弹出菜单中选择“调用路径”或“被调用路径” 5.在弹出的窗口中可以查看函数的调用关系 折叠或展开代码快捷键&…...

编程日记 2025/6/28 1:50:54

Flask接口开发--GET接口

安装Flask 1.安装命令&#xff1a; pip3 install Flask2.查看Flask版本&#xff1a; pip3 show flask如图我的Flask版本号是2.0.3 项目创建 1、在PyCharm中&#xff0c;我们点击左上方的 file&#xff0c;选择 New Project&#xff0c;创建一个Flask项目。&#xff08;Py…...

编程日记 2025/7/19 4:18:15

爬虫豆瓣电影

以下是一个简单的使用 requests 和 BeautifulSoup 库来爬取网页标题的 Python 爬虫示例代码&#xff0c;以爬取豆瓣电影 Top250 首页为例&#xff08;注意遵守网站的 robots.txt 协议&#xff0c;不要过度爬取给网站造成负担&#xff09;&#xff1a; 首先确保你已经安装了 re…...

编程日记 2025/7/20 15:34:51

[ ] 前后端连接 结合常见故障场景和解决

调试流程图&#xff1a; 一、基础网络检查 IP与端口验证 确认前端请求的URL与后端实际运行的IP和端口完全一致&#xff08;如http://192.168.1.100:8080/api&#xff09;使用ping命令测试网络连通性&#xff0c;telnet检查端口是否开放&#xff1a; telnet 192.168.1.100 80…...

编程日记 2025/7/20 11:33:35

MyBatis-Plus 的加载及初始化

在 Spring Boot 启动过程中&#xff0c;MyBatis-Plus 的加载和初始化涉及多个阶段的工作。这些工作包括 MyBatis-Plus 自身的配置解析、Mapper 接口的扫描与注册、SQL 语句的动态注入以及底层 MyBatis 的初始化等。以下是对整个过程的详细分析&#xff1a; 1. Spring Boot 启动…...

编程日记 2025/7/16 15:56:54

LangChain开发（九）基于Rag实现文档问答

文章目录 关联阅读Rag是什么&#xff1f;Rag工作流索引&#xff08;Indexing&#xff09;检索和生成&#xff08;Retrieval and generation&#xff09; 文档问答实现流程代码实现 源码地址参考资料 关联阅读 LangChain开发&#xff08;一&#xff09;LangChain介绍和对话demo…...

编程日记 2025/7/16 21:03:00

Netty——TCP 粘包/拆包问题

文章目录 1. 什么是 粘包/拆包 问题&#xff1f;2. 原因2.1 Nagle 算法2.2 滑动窗口2.3 MSS 限制2.4 粘包的原因2.5 拆包的原因 3. 解决方案3.1 固定长度消息3.2 分隔符标识3.3 长度前缀协议3.3.1 案例一3.3.2 案例二3.3.3 案例三 4. 总结 1. 什么是 粘包/拆包 问题&#xff1f…...

编程日记 2025/7/11 8:57:25

探索抓包利器ProxyPin，实现手机APP请求抓包，支持https请求

以下是ProxyPin的简单介绍&#xff1a; - ProxyPin是一个开源免费HTTP(S)流量捕获神器&#xff0c;支持 Windows、Mac、Android、IOS、Linux 全平台系统- 可以使用它来拦截、检查并重写HTTP(S)流量&#xff0c;支持捕获各种应用的网络请求。ProxyPin基于Flutter开发&#xff0…...

编程日记 2025/7/17 11:04:48

【例3.5】位数问题（信息学奥赛一本通-1313）

【题目描述】 在所有的N位数中&#xff0c;有多少个数中有偶数个数字3?由于结果可能很大&#xff0c;你只需要输出这个答案对12345取余的值。 【输入】 读入一个数N(N≤1000)。 【输出】 输出有多少个数中有偶数个数字3。 【输入样例】 2 【输出样例】 73 【题解代码】 #incl…...

编程日记 2025/7/16 1:35:48

python之selenium中的窗口切换

前提&#xff1a;触发一个事件打开一个新的窗口 1&#xff0c;先获取所有的句柄&#xff1a; handles driver.windowhandlers2&#xff0c;获取当前窗口 cururl driver.current_url3&#xff0c;循环遍历所有句柄 for handle in handles:driver.switch_to.window(handle)i…...

编程日记 2025/7/15 10:06:09

青少年编程与数学 02-011 MySQL数据库应用 20课题、连接与ORM

青少年编程与数学 02-011 MySQL数据库应用 20课题、连接与ORM 一、数据库连接基本概念连接过程连接状态连接池技术 二、Go语言连接MySQL数据库安装MySQL驱动导入相关包建立数据库连接检查连接状态执行SQL操作查询操作插入操作更新操作删除操作 完整示例 三、Python语言连接MySQ…...

编程日记 2025/7/19 20:50:25

Java 大视界 -- 基于 Java 的大数据分布式系统的监控与运维实践（155）

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

编程日记 2025/7/18 1:08:37

三维空间中点、线、面的关系

三维空间中点、线、面的关系 点相对于平面的位置关系直线相对于平面的位置关系1.根据三点计算平面方程 //根据3点计算平面方程#include <iostream> #include <cmath> #include <vector>...

编程日记 2025/6/28 1:51:25

Spring JdbcTemplate 万字详解（通俗易懂）

目录 Δ前言 一、什么是JdbcTemplate&#xff1f; 1.定义&#xff1a; 2.作用&#xff1a; 3.环境搭建&#xff1a; 二、JdbcTemplate的简单使用 1.通过JdbcTemplate实现数据的添加&#xff1a; 2.通过JdbcTemplate实现数据的修改&#xff1a; 三、JdbcTemplate的进阶使用 …...

编程日记 2025/7/14 10:12:46

centos 7 搭建ftp 基于虚拟用户用shell脚本搭建

#!/bin/bash# 步骤1: 更新系统并安装vsftpd yum update -y yum install vsftpd -y# 步骤2: 创建虚拟用户信息文件并转换为数据库文件 cat << EOF > /etc/vsftpd/virtual_users.txt ftpvuser 123456 EOFdb_load -T -t hash -f /etc/vsftpd/virtual_users.txt /etc/vsft…...

编程日记 2025/7/11 4:53:02

《Android低内存设备性能优化实战：深度解析Dalvik虚拟机参数调优》

1. 痛点分析&#xff1a;低内存设备的性能困局 现象描述&#xff1a;大应用运行时频繁GC导致卡顿 根本原因&#xff1a;Dalvik默认内存参数与硬件资源不匹配 解决方向&#xff1a;动态调整堆内存参数以平衡性能与资源消耗 2. 核心调优参数全景解析 关键参数矩阵&#xff1…...

编程日记 2025/7/18 14:34:08

【AI学习】概念了解

1，GPU 专门用于处理图形相关运算任务的微处理器，它起初主要聚焦于加速图形渲染，让计算机能够快速、流畅地显示高质量的图像、视频以及 3D 场景等内容，在电脑游戏、影视特效制作、动画设计等领域有着至关重要的作用。 与传统的中央处理器（CPU）相比，GPU 有着数量众多的核…...

编程日记 2025/7/10 19:17:00