Tree元件的快速定位更新節點的狀態,以及修改節點的資料屬性等操作

Evisu47（常安欧阳）發表於2024-08-22
元件

當我們點選樹節點的時候我們常常只能獲得樹的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])
        }
      } 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])
        }
      }
    }
  }

treeLoop 函式是一個通用的樹形結構遍歷工具，它可以用於多種場景，如查詢特定節點、更新節點狀態等。透過傳入不同的 callback 函式，可以實現不同的功能。當 key 為 null 時，callback 會在遍歷到每一個節點時被呼叫；而當 key 不為空時，只有在找到與 key 匹配的節點時才會呼叫 callback。

相關文章