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

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

JS 复制代码
/**
* @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。

相关推荐
Hilaku15 分钟前
为什么大厂对前端算法要求极高?
前端·javascript·程序员
你可如意21 分钟前
从Promise开始,一篇让你彻底建立起JS的异步编程模型
javascript
用户84298142418101 小时前
AI时代,JS混淆加密还有用吗?
前端·javascript
申君健24864182772022 小时前
MCP TypeScript SDK v2 完整升级变化说明
javascript
Ivanqhz2 小时前
Rust Lazy浅析
java·javascript·rust
铁皮饭盒3 小时前
面试官:如何用 Bun + JS 实现安全的文件 MCP 工具集
前端·javascript·后端
weixin_BYSJ19875 小时前
springboot3家政平台小程序--附源码00904
java·javascript·spring boot·python·django·flask·php
Wect6 小时前
TypeScript 完全指南
前端·javascript·typescript
张元清6 小时前
React useDeepCompareEffect:修复 useEffect 的对象依赖问题(2026)
javascript·react.js
phltxy7 小时前
LangChain_v1_Agent快速开发和更新说明
前端·javascript·langchain