antd———Tree结构之探索遍历及删除

前言：笔者在前端开发过程中遇到关于树的问题，把antd官方的Tree组件直接拿下来用了，刚开始其他方法都还好，当需求中写个节点的删除功能的时候，因为算法功底不好，导致此功能实现不了，所以有了此文

背景

前端项目是react+umi+antd，这个用过的都知道好，不做赘述，笔者先找到了这个antd官方提供的Tree组件

export default class MyTree extends React.Component {
  state = {
    treeData: [
      {
        key:'1',
        title:"第一部分",
        children:[
          {key:'1-1',title:"一、二级标题",},
          {key:'1-2',title:"二、二级标题",},
          {key:'1-3',title:"三、二级标题",},
          {key:'1-4',title:"四、二级标题",}
        ]
      },
      {
        key:'2',
        title:"第二部分",
        children:[
          {
            key:'2-1',
            title:"一、二级标题",
            children:[
              {key:'2-1-1',title:"（一）三级标题",},
              {key:'2-1-2',title:"（二）三级标题",},
              {key:'2-1-3',title:"（三）三级标题",},
            ]
          },
          {
            key:'2-2',
            title:"二、二级标题",
            children:[
              {key:'2-2-1',title:"（一）三级标题",},
              {key:'2-2-2',title:"（二）三级标题",}
            ]
          },
          {
            key:'2-3',
            title:"三、二级标题",
            children:[
              {key:'2-3-1',title:"（一）三级标题",},
              {key:'2-3-2',title:"（二）三级标题",},
            ]
          },
          {
            key:'2-4',
            title:"四、二级标题",
            children:[
              {key:'2-4-1',title:"（一）三级标题",},
              {key:'2-4-2',title:"（二）三级标题",},
            ]
          },
          {
            key:'2-5',
            title:"五、二级标题",
            children:[
              {key:'2-5-1',title:"（一）三级标题",},
              {key:'2-5-2',title:"（二）三级标题",},
            ]
          },
        ]
      },
      {
        key:'3',
        title:"第三部分",
        children:[
          {
            key:'3-1',
            title:"一、二级标题",
            children:[
              {key:'3-1-1',title:"（一）综合医院",},
              {key:'3-1-2',title:"（二）重点专科医院",},
            ]
          },
          {
            key:'3-2',
            title:"二、二级标题",
            children:[
              {key:'3-2-1',title:"（一）三级标题",},
              {key:'3-2-2',title:"（二）三级标题",},
            ]
          },
          {
            key:'3-3',
            title:"三、二级标题",
            children:[
              {key:'3-3-1',title:"（一）三级标题",},
              {key:'3-3-2',title:"（二）三级标题",},
            ]
          },
          {
            key:'3-4',
            title:"四、二级标题",
            children:[
              {key:'3-4-1',title:"（一）三级标题",},
              {key:'3-4-2',title:"（二）三级标题",},
            ]
          },
        ]
      }
    ]
  }
 

  renderTreeNodes = data => data.map((item) => {
    if (item.children) {
      return (
        <TreeNode title={item.title} key={item.key} dataRef={item}>
          {this.renderTreeNodes(item.children)}
        </TreeNode>
      );
    }
    return <TreeNode {...item} dataRef={item} />;
  })

  render() {
    return (
      <Tree>
        {this.renderTreeNodes(this.state.treeData)}
      </Tree>
    );
  }
}

通过这个结构，render出来的结果，和https://ant.design/components/tree-cn/中的效果

tree-demo-v1

寻找删除之道

这个时候又行业大佬提供了以下思路

1：递归去找到然后删除
2：把key值不等于这个得，重新放入一个新数组，最后重新设置state
3：把key值直接设置为className，找dom数然后删除

其实三种方法都可以进行探索，网上找了N多资料，都不得解，最终晚上灵光一闪，得出以下思路：
如果把data数组，都放在最顶层，取消children数组，然后给每个都加上一个parentId，
1：这样满足了render的时候可以进行递归，
2：要删除的时候，或者更改的时候，遍历data，就能找打key，进行删除，当然，如果删除的是父级，同时也可以删除所有子级节点
以下是代码

export default class MyTree extends React.Component {
  state = {
    data:[
      {key:'1',title:'第一部分',parentId:'-1'},
      {key:'1-1',title:'一、二级标题',parentId:'1'},
      {key:'1-2',title:'二、二级标题',parentId:'1'},
      {key:'1-3',title:'三、二级标题',parentId:'1'},
      {key:'1-4',title:'四、二级标题',parentId:'1'},
      {key:'2',title:'第二部分',parentId:'-1'},
      {key:'2-1',title:'一、二级标题',parentId:'2'},
      {key:'2-1-1',title:'（一）三级标题',parentId:'2-1'},
      {key:'2-1-2',title:'（二）三级标题',parentId:'2-1'},
      {key:'2-1-3',title:'（三）三级标题',parentId:'2-1'},
      {key:'2-2',title:'二、二级标题',parentId:'2'},
      {key:'2-2-1',title:'（一）三级标题',parentId:'2-2'},
      {key:'2-2-2',title:'（二）三级标题',parentId:'2-2'},
      {key:'2-3',title:'三、二级标题',parentId:'2'},
      {key:'2-3-1',title:'（一）三级标题',parentId:'2-3'},
      {key:'2-3-2',title:'（二）三级标题',parentId:'2-3'},
      {key:'2-4',title:'四、二级标题',parentId:'2'},
      {key:'2-4-1',title:'（一）三级标题',parentId:'2-4'},
      {key:'2-4-2',title:'（二）三级标题',parentId:'2-4'},
      {key:'2-5',title:'五、二级标题',parentId:'2'},
      {key:'2-5-1',title:'（一）三级标题',parentId:'2-5'},
      {key:'2-5-2',title:'（二）三级标题',parentId:'2-5'},
      {key:'3',title:'第三部分',parentId:'-1'},
      {key:'3-1',title:'一、二级标题',parentId:'3'},
      {key:'3-1-1',title:'（一）三级标题',parentId:'3-1'},
      {key:'3-1-2',title:'（二）三级标题',parentId:'3-1'},
      {key:'3-2',title:'二、二级标题',parentId:'3'},
      {key:'3-2-1',title:'（一）三级标题',parentId:'3-2'},
      {key:'3-2-2',title:'（二）三级标题',parentId:'3-2'},
      {key:'3-3',title:'三、二级标题',parentId:'3'},
      {key:'3-3-1',title:'（一）三级标题',parentId:'3-3'},
      {key:'3-3-2',title:'（二）三级标题',parentId:'3-3'},
      {key:'3-4',title:'四、二级标题',parentId:'3'},
      {key:'3-4-1',title:'（一）三级标题',parentId:'3-4'},
      {key:'3-4-2',title:'（二）三级标题',parentId:'3-4'},
    ],
  }

  // 根据父级找到所有子级节点
  getByParentId(parentId){
    return this.state.data.filter(item => {
      return item.parentId === parentId;
    })
  }

  renderTreeNode = (parentId) => {
    // 先找到子级节点
    var tmp = this.getByParentId(parentId);
    if(tmp.length > 0){
      // 遍历铺页面，如果数组长度不为0则证明子级不为空
      return tmp.map(item =>{
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNode(item.key)}
          </TreeNode>
        );
      })
    }
  }

  render() {
    return (
      <Tree>
        {/*先找到所有parentId为-1的顶级节点*/}
        {this.renderTreeNode("-1")}
      </Tree>
    );
  }
}
tree-demo-v2

接下来就好办了，删除方法和右键响应方法

  //简单处理，右键删除
  handleRightClick = (e) =>{
    let key = e.node.props.dataRef.key;
    this.handleDelete(key)
  }
  
  //根据key删除节点
  handleDelete = (key) => {
    let {data} = this.state;
    data.splice(data.findIndex(item => item.key === key),1)
    this.setState(data);
  }

Tree绑定右键处理事件

<Tree onRightClick={this.handleRightClick}>
          {/*先找到所有parentId为-1的顶级节点*/}
          {this.renderTreeNode("-1")}
    </Tree>

效果：


image.png

同理，要对节点进行其他遍历操作就更方便，不会像第一次那样做各种递归处理，给不同节点增加不同样式，修改内容等等，方便很多

鉴于楼下有个小伙伴，提问如何更换位置，今日有空，也实现出来，大家多多指导

class MyTree extends React.Component {
  state = {

    currentNode: null,
    data:[
      {key:'1',title:'第一部分',parentId:'-1'},
      {key:'2',title:'第二部分',parentId:'-1'},
      {key:'3',title:'第三部分',parentId:'-1'},
      {key:'1-1',title:'一、二级标题',parentId:'1'},
      {key:'1-2',title:'二、二级标题',parentId:'1'},
      {key:'1-3',title:'三、二级标题',parentId:'1'},
      {key:'1-4',title:'四、二级标题',parentId:'1'},
      {key:'2-1',title:'一、二级标题',parentId:'2'},
      {key:'2-2',title:'二、二级标题',parentId:'2'},
      {key:'2-3',title:'三、二级标题',parentId:'2'},
      {key:'2-4',title:'四、二级标题',parentId:'2'},
      {key:'2-5',title:'五、二级标题',parentId:'2'},
      {key:'3-1',title:'一、二级标题',parentId:'3'},
      {key:'3-2',title:'二、二级标题',parentId:'3'},
      {key:'3-3',title:'三、二级标题',parentId:'3'},
      {key:'3-4',title:'四、二级标题',parentId:'3'},
      {key:'2-1-1',title:'（一）三级标题',parentId:'2-1'},
      {key:'2-1-2',title:'（二）三级标题',parentId:'2-1'},
      {key:'2-1-3',title:'（三）三级标题',parentId:'2-1'},
      {key:'2-2-1',title:'（一）三级标题',parentId:'2-2'},
      {key:'2-2-2',title:'（二）三级标题',parentId:'2-2'},
      {key:'2-3-1',title:'（一）三级标题',parentId:'2-3'},
      {key:'2-3-2',title:'（二）三级标题',parentId:'2-3'},
      {key:'2-4-1',title:'（一）三级标题',parentId:'2-4'},
      {key:'2-4-2',title:'（二）三级标题',parentId:'2-4'},
      {key:'2-5-1',title:'（一）三级标题',parentId:'2-5'},
      {key:'2-5-2',title:'（二）三级标题',parentId:'2-5'},
      {key:'3-1-1',title:'（一）三级标题',parentId:'3-1'},
      {key:'3-1-2',title:'（二）三级标题',parentId:'3-1'},
      {key:'3-2-1',title:'（一）三级标题',parentId:'3-2'},
      {key:'3-2-2',title:'（二）三级标题',parentId:'3-2'},
      {key:'3-3-1',title:'（一）三级标题',parentId:'3-3'},
      {key:'3-3-2',title:'（二）三级标题',parentId:'3-3'},
      {key:'3-4-1',title:'（一）三级标题',parentId:'3-4'},
      {key:'3-4-2',title:'（二）三级标题',parentId:'3-4'},
    ],
  }

  // 根据父级找到所有子级节点
  getByParentId(parentId){
    return this.state.data.filter(item => {
      return item.parentId === parentId;
    })
  }

  renderTreeNode = (parentId) => {
    // 先找到子级节点
    let tmp = this.getByParentId(parentId);
    if(tmp.length > 0){
      // 遍历铺页面，如果数组长度不为0则证明子级不为空
      return tmp.map(item =>{
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNode(item.key)}
          </TreeNode>
        );
      })
    }
  }
  handleRightClick = ({event,node}) =>{
    let key = node.props.dataRef.key;
    this.handleDelete(key)
  }
  /**
    * 上下移动
    */
  handleMoveOn=()=> {
    let data = this.state.data;
    for(let i = 0; i< data.length; i++){
      if(data[i].key == this.state.currentNode && i >= 1){
          let tmp = data[i];
          data[i] = data[i-1]
          data[i-1] = tmp;
      }
    }
    this.setState(data)
  }

  handleClick=(e)=>{
    console.log(1)
    this.setState({currentNode:e})
  }

  //根据key删除节点
  handleDelete = (key) => {
    let {data} = this.state;
    data.splice(data.findIndex(item => item.key === key),1)
    this.setState(data);
  }


  render() {
    return (
      <div>
        <div className={styles.btn}>
          <Button onClick={this.handleMoveOn} disabled={this.state.currentNode==null}>上移</Button>
        </div>
        <Tree onRightClick={this.handleRightClick} className={styles.normal} onSelect={this.handleClick}>
          {/*先找到所有parentId为-1的顶级节点*/}
          {this.renderTreeNode("-1")}
        </Tree>
      </div>
    );
  }
}
result

鸣谢：感谢antd、umi 提供优秀的前端框架
版权声明：本文原创，转载请声明出处，谢谢

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,376评论 6赞 491
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,126评论 2赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 156,966评论 0赞 347
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,432评论 1赞 283
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,519评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,792评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,933评论 3赞 406
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,701评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,143评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,488评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,626评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,292评论 4赞 329
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,896评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1赞 265
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,324评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,494评论 2赞 348

推荐阅读更多精彩内容

  • 数据结构和算法（上）
    1 序 2016年6月25日夜，帝都，天下着大雨，拖着行李箱和同学在校门口照了最后一张合照，搬离寝室打车去了提前租...
    RichardJieChen阅读 5,081评论 0赞 12
  • MySQL索引背后的数据结构及算法原理
    转载：http://blog.codinglabs.org/articles/theory-of-mysql-in...
    qf1007阅读 1,287评论 0赞 0
  • 随笔
    等二十来岁，发现十来岁青春期中二病完全好了。当初种种嫌弃父母的行为的原因，好像一夜之间消失不见。 ...
    苫一阅读 89评论 0赞 0
  • 吃货的春天
    许多人对春天向来无甚好感，曾有一东北老师私下抱怨：江南气候好在哪里?冬天冷死夏天热死，春天不冷不热下个把月的梅雨人...
    燕老六阅读 302评论 0赞 0
  • 我爸不是李刚，可我照样爱他！
    我爸是开店做小生意的，人家都说“无商不奸”，人家也说做生意能发大财，可是我爸完全活出这两句话的反面。 我爸以前也是...
    读写拾光阅读 338评论 0赞 1