Tree组件的快速定位更新节点的状态,以及修改节点的数据属性等操作

news/2024/9/20 2:50:53/文章来源:https://www.cnblogs.com/Evisu47/p/18374198

当我们点击树节点的时候我们常常只能获得树的id,那么我么如何获快速定位到树节点的内容呢,除此之外,当树已经存在时,但是缺少我们想要的内容时,我们想在树节点上添加我们需要的额外的内容时该怎么办,那么就是用以下方法可以快速定位到我们需要的节点并可以快速添加内容

/**
* @params
*     data:树节点
*     key:需要传的id(具体就是树节点唯一值就可以具体对于树而言)
*     callback:更新节点的状态,收集特定类型的节点信息,修改节点的数据属性等。
*       node:当前节点的所有数据
*       i:这个索引帮助我们理解
*       data:这个参数提供了当前层级所有节点的信息,可以用于上下文相关的操作。当前节点在其兄弟节点中的相对位置。
*       parent:允许访问父节点的信息,对于构建层级关系非常有用
*     parentNode:它表示当前节点的父节点。这个参数在递归调用 treeLoop 时传递给下一层,以便下一层的节点能够知道它们的父节点是谁。
*/const treeLoop = (data: treeDataNode[], key: React.Key | null,callback: (node: treeDataNode, i: number, data: treeDataNode[], parent?: treeDataNode | null) => void,parentNode?: treeDataNode | null,) => {for (let i = 0; i < data.length; i++) {if (key == null) {callback(data[i], i, data, parentNode)if (data[i].children) {treeLoop (data[i].children!, key, callback, data[i], type)}} else {if (data[i].id === key) {return callback(data[i], i, data, parentNode)}if (data[i].children) {treeLoop (data[i].children!, key, callback, data[i], type)}}}}

treeLoop 函数是一个通用的树形结构遍历工具,它可以用于多种场景,如查找特定节点、更新节点状态等。通过传入不同的 callback 函数,可以实现不同的功能。当 key 为 null 时,callback 会在遍历到每一个节点时被调用;而当 key 不为空时,只有在找到与 key 匹配的节点时才会调用 callback。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/785483.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

供应链管理系统(SCM) —— 企业物流的智能枢纽

SAP 供应链管理系统以打造数字化和集成化的供应链管理平台为使命,将传统的仓储管理系统、制造执行系统、产品管理系统等软件进行升级和上云管理,为企业提供面向客户、合作伙伴及员工的数字化SCM系统平台。SAP SCM系统从设计到运维,全面优化供应链,规避风险 供应链管理模式日…

Flannel IPsec 模式

Flannel IPsec 模式Flannel IPSec 模式 一、环境信息主机 IPubuntu 172.16.94.141软件 版本docker 26.1.4helm v3.15.0-rc.2kind 0.18.0clab 0.54.2kubernetes 1.23.4ubuntu os Ubuntu 20.04.6 LTSkernel 5.11.5 内核升级文档二、安装服务 kind 配置文件信息 $ cat install.sh#…

[Mysql]执行一条语句的过程

执行一条 select 语句,期间发生了什么? 学习 SQL 的时候,大家肯定第一个先学到的就是 select 查询语句了,比如下面这句查询语句: // 在 product 表中,查询 id = 1 的记录 select * from product where id = 1;但是有没有想过,MySQL 执行一条 select 查询语句,在 MySQL …

Free Online 1080P Youtube Video Downloader All In One

Free Online 1080P Youtube Video Downloader All In One 免费在线 1080P Youtube 视频下载器IELTS 雅思Free Online 1080P Youtube Video Downloader All In One免费在线 1080P Youtube 视频下载器https://yt5s.io/en93https://yt5s.biz/enxj100/ demosIELTS 雅思https://www.…

基于UltraScaleKU115的高性能PCIe3.0 x8-FMC+接口卡

基于UltraScaleKU115的高性能PCIe3.0 x8-FMC+接口卡,是一款高性能的PCIe 3.0 X8板卡。主控芯片采用Xilinx 公司Kintex UltraScale系列FPGA 家族中的XCKU115-FLVA1517(兼容XCKU085-FLVA1517)。板卡含有2 组共8GB(单组4GB)的DDR4 内存颗粒,支持JTAG 口和QSFP+光纤接口以及F…

数字集成电路设计实践 IIC-Slave接口芯片的全流程设计

数字集成电路设计实践 IIC-Slave接口芯片的全流程设计 一、 芯片设计方案 IIC原理 1. I2C协议 I2C协议由Philips公司推出。 1.1. 端口名称及含义 标准I2C只有2根信号线。 SCL:Serial CLock:串行时钟线,由主机产生并分享给从机。 SDA:Serial DAta:串行数据线,连接在主从机…

反序列化刷题(二)

反序列化刷题 web259(SSRF) 1、explod(,,"hello,ju,hey"):把字符串以逗号为判断点分为若干个数组,hello ju hey 2、array_pop($x):删除数组中的最后一个元素1、$_SERVER[HTTP_X_FORWARDED_FOR]用来获取数据包的IP地址;我们目标要ip=127.0.0.1; 这里可以用x-fo…

POD基本操作

一.Pod生命周期 在Kubernetes中,Pod的生命周期经历了几个重要的阶段。下面是Pod生命周期的详细介绍: 1.Pending(待处理):调度: Pod被创建后,首先进入“Pending”状态。此时,Kubernetes的调度器(Scheduler)会选择一个合适的节点来运行Pod。资源分配: 在调度器选择了节点…

C++ SPFA算法解析

前言 将了解 C++ 求最短路中 SPFA 的算法 SPFA SPFA的一些说明 SPFA:适用于权值有负值,且没有负圈的图的单源最短路径,论文中的复杂度O(kE),k为每个节点进入Queue的次数,且k一般<=2,但此处的复杂度证明是有问题的,其实SPFA的最坏情况应该是O(VE).! 引例: 输入格式 给…

.Net8 部署到IIS 10 上需要注意的点

现在大部分项目都上云了,而且是linux的系统,这部分我下一篇再讲,这次讲一下如何部署到iis10,首先项目点击发布-》目标框架.net 8 部署模式是独立,目标运行时是win-x64, 你也可以选择部署模式为依赖框架,目标运行时选择可移植,但是这样的话要注意IIS的应用程序池选择启用…

单文件抽奖小工具(不放回抽)

单文件抽奖小工具(不放回抽) 创建时间:2024-08-12 一、HTML 部分 这段 HTML 代码构建了抽奖小工具的页面结构。引入了 jQuery 库用于后续的 JavaScript 操作,定义了两个音频元素用于播放抽奖相关音效。h1 标签显示“抽奖”标题,span 标签用于显示时间,wrapDiv 包含了抽奖…

【C#】.NET报错:所生成项目的处理器框架“MSIL”与引用“xxx”的处理器架构“AMD64”不匹配

一、现象所生成项目的处理器架构“MSIL”与引用“System.Data.SQLite, Version=1.0.60.0, Culture=neutral, PublicKeyToken=db937bc2d44ff139, processorArchitecture=x86”的处理器架构“AMD64”不匹配。这种不匹配可能会导致运行时失败。请考虑通过配置管理器更改您的项目的…