Antd 树组件删除节点后选中同级节点

Antd 树组件删除节点后选中同级节点

在写业务组件的时候，遇到了一个需求。当树组件删除选中的节点或者目录后，要选中同级的节点或目录。主要逻辑如下：
当前选中的是节点，若节点是当前目录下的第一个，则选中后一个；若非第一个，则选中前一个。目录同理。
看起来较为简单，但是实际上还是需要用到层层递归去寻找。总的来说，完成这个功能主要用到的方法就是递归和深度搜索。

分析一下，要完成这个功能。首先要获取删除数据的同级数据，然后进行判断被删的数据处于同级数据中的第几个。如果是第一个则向后找，如果非第一个，先向前找，若没有找到则再向后找。查找完当前的数据都没有找到后，则向上一级查找。

拿图分析下，节点0-1-1-0-1被删除后，会选中0-1-1-0-2；0-1-1-0-2被删除后，会选中上一级目录0-1-0中的节点0-1-0-1

//判断删除后选中哪个数据
  const checkAfterDelete = (
    key: Key,
    type: string,
    dataList?: myTreeNode[],
  ) => {
   
    if (!key) {
   
      return;
    }
    //如果同级下没有或者只有被删的数据则递归向上一级找
    if (!dataList || dataList.length < 2) {
   
      findFatherNode(key, type);
    } else {
   
      if (type) {
   
        //找到删除的节点是当前同级中的第几个
        let index = -1;
        dataList.map((item, itemIndex) => {
   
          if (item.key === key) {
   
            index = itemIndex;
          }
        });
        //被删的是第一个就向后找
        if (index === 0) {
   
          !loopAfterBroTree(index + 1, dataList, type)
            ? findFatherNode(dataList[index].key, type)
            : '';
        } else if (index > 0) {
   
          //被删的是中间，先向上找，找不到再向下
          !loopBeforeBroTree(index - 1, dataList, type)
            ? !loopAfterBroTree(index + 1, dataList, type)
              ? findFatherNode(dataList[index].key, type)
              : ''
            : '';
        }
      }
    }
  };

  //递归查找上一级
  const findFatherNode = (key: Key, type: string) => {
   
    const parentKey = getParentKey(key, remainData!);
    const brotherNodes = getBrotherNode(data, parentKey);
    //被删的是数据是目录，且同级没有目录则选中父级目录
    if (type === 'catalogue') {
   
      let catalogueSelf = brotherNodes?.filter(
        (item) => item.key === parentKey,
      );
      findFirstNode(catalogueSelf!, type)
        ? ''
        : checkAfterDelete(parentKey, type, brotherNodes);
    } else {
   
      checkAfterDelete(parentKey, type, brotherNodes);
    }
  };

向前查找的方法

const loopBeforeBroTree = (
    index: number,
    brotherNode: myTreeNode[],
    type: string,
  ): boolean => {
   
    if (index >= 0) {
   
      if (findFirstNode([brotherNode[index]], type)) {
   
        return true;
      } else {
   
        let result = loopBeforeBroTree(index - 1, brotherNode, type);
        //找到则停止
        if (result) return result;
      }
    }
    return false;
  };

向后查找的方法

  const loopAfterBroTree = (
    index: number,
    brotherNode: myTreeNode[],
    type: string,
  ): boolean => {
   
    if (index < brotherNode.length) {
   
      if (findFirstNode([brotherNode[index]], type)) {
   
        return true;
      } else {
   
        let result = loopAfterBroTree(index + 1, brotherNode, type);
        //找到则停止
        if (result) return result;
      }
    }
    return false;
  };

完整代码

import React, {
    Key, useEffect, useState } from 'react';
import {
    Tree } from 'antd';
import