antd———Tree結(jié)構(gòu)之探索遍歷及刪除

前言：筆者在前端開發(fā)過程中遇到關(guān)于樹的問題，把a(bǔ)ntd官方的Tree組件直接拿下來用了，剛開始其他方法都還好，當(dāng)需求中寫個(gè)節(jié)點(diǎn)的刪除功能的時(shí)候，因?yàn)樗惴üΦ撞缓?，?dǎo)致此功能實(shí)現(xiàn)不了，所以有了此文

背景

前端項(xiàng)目是react+umi+antd，這個(gè)用過的都知道好，不做贅述，筆者先找到了這個(gè)antd官方提供的Tree組件

export default class MyTree extends React.Component {
  state = {
    treeData: [
      {
        key:'1',
        title:"第一部分",
        children:[
          {key:'1-1',title:"一、二級(jí)標(biāo)題",},
          {key:'1-2',title:"二、二級(jí)標(biāo)題",},
          {key:'1-3',title:"三、二級(jí)標(biāo)題",},
          {key:'1-4',title:"四、二級(jí)標(biāo)題",}
        ]
      },
      {
        key:'2',
        title:"第二部分",
        children:[
          {
            key:'2-1',
            title:"一、二級(jí)標(biāo)題",
            children:[
              {key:'2-1-1',title:"（一）三級(jí)標(biāo)題",},
              {key:'2-1-2',title:"（二）三級(jí)標(biāo)題",},
              {key:'2-1-3',title:"（三）三級(jí)標(biāo)題",},
            ]
          },
          {
            key:'2-2',
            title:"二、二級(jí)標(biāo)題",
            children:[
              {key:'2-2-1',title:"（一）三級(jí)標(biāo)題",},
              {key:'2-2-2',title:"（二）三級(jí)標(biāo)題",}
            ]
          },
          {
            key:'2-3',
            title:"三、二級(jí)標(biāo)題",
            children:[
              {key:'2-3-1',title:"（一）三級(jí)標(biāo)題",},
              {key:'2-3-2',title:"（二）三級(jí)標(biāo)題",},
            ]
          },
          {
            key:'2-4',
            title:"四、二級(jí)標(biāo)題",
            children:[
              {key:'2-4-1',title:"（一）三級(jí)標(biāo)題",},
              {key:'2-4-2',title:"（二）三級(jí)標(biāo)題",},
            ]
          },
          {
            key:'2-5',
            title:"五、二級(jí)標(biāo)題",
            children:[
              {key:'2-5-1',title:"（一）三級(jí)標(biāo)題",},
              {key:'2-5-2',title:"（二）三級(jí)標(biāo)題",},
            ]
          },
        ]
      },
      {
        key:'3',
        title:"第三部分",
        children:[
          {
            key:'3-1',
            title:"一、二級(jí)標(biāo)題",
            children:[
              {key:'3-1-1',title:"（一）綜合醫(yī)院",},
              {key:'3-1-2',title:"（二）重點(diǎn)?？漆t(yī)院",},
            ]
          },
          {
            key:'3-2',
            title:"二、二級(jí)標(biāo)題",
            children:[
              {key:'3-2-1',title:"（一）三級(jí)標(biāo)題",},
              {key:'3-2-2',title:"（二）三級(jí)標(biāo)題",},
            ]
          },
          {
            key:'3-3',
            title:"三、二級(jí)標(biāo)題",
            children:[
              {key:'3-3-1',title:"（一）三級(jí)標(biāo)題",},
              {key:'3-3-2',title:"（二）三級(jí)標(biāo)題",},
            ]
          },
          {
            key:'3-4',
            title:"四、二級(jí)標(biāo)題",
            children:[
              {key:'3-4-1',title:"（一）三級(jí)標(biāo)題",},
              {key:'3-4-2',title:"（二）三級(jí)標(biāo)題",},
            ]
          },
        ]
      }
    ]
  }
 

  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>
    );
  }
}

通過這個(gè)結(jié)構(gòu)，render出來的結(jié)果，和https://ant.design/components/tree-cn/中的效果

tree-demo-v1

尋找刪除之道

這個(gè)時(shí)候又行業(yè)大佬提供了以下思路

1：遞歸去找到然后刪除
2：把key值不等于這個(gè)得，重新放入一個(gè)新數(shù)組，最后重新設(shè)置state
3：把key值直接設(shè)置為className，找dom數(shù)然后刪除

其實(shí)三種方法都可以進(jìn)行探索，網(wǎng)上找了N多資料，都不得解，最終晚上靈光一閃，得出以下思路：
如果把data數(shù)組，都放在最頂層，取消children數(shù)組，然后給每個(gè)都加上一個(gè)parentId，
1：這樣滿足了render的時(shí)候可以進(jìn)行遞歸，
2：要?jiǎng)h除的時(shí)候，或者更改的時(shí)候，遍歷data，就能找打key，進(jìn)行刪除，當(dāng)然，如果刪除的是父級(jí)，同時(shí)也可以刪除所有子級(jí)節(jié)點(diǎn)
以下是代碼

export default class MyTree extends React.Component {
  state = {
    data:[
      {key:'1',title:'第一部分',parentId:'-1'},
      {key:'1-1',title:'一、二級(jí)標(biāo)題',parentId:'1'},
      {key:'1-2',title:'二、二級(jí)標(biāo)題',parentId:'1'},
      {key:'1-3',title:'三、二級(jí)標(biāo)題',parentId:'1'},
      {key:'1-4',title:'四、二級(jí)標(biāo)題',parentId:'1'},
      {key:'2',title:'第二部分',parentId:'-1'},
      {key:'2-1',title:'一、二級(jí)標(biāo)題',parentId:'2'},
      {key:'2-1-1',title:'（一）三級(jí)標(biāo)題',parentId:'2-1'},
      {key:'2-1-2',title:'（二）三級(jí)標(biāo)題',parentId:'2-1'},
      {key:'2-1-3',title:'（三）三級(jí)標(biāo)題',parentId:'2-1'},
      {key:'2-2',title:'二、二級(jí)標(biāo)題',parentId:'2'},
      {key:'2-2-1',title:'（一）三級(jí)標(biāo)題',parentId:'2-2'},
      {key:'2-2-2',title:'（二）三級(jí)標(biāo)題',parentId:'2-2'},
      {key:'2-3',title:'三、二級(jí)標(biāo)題',parentId:'2'},
      {key:'2-3-1',title:'（一）三級(jí)標(biāo)題',parentId:'2-3'},
      {key:'2-3-2',title:'（二）三級(jí)標(biāo)題',parentId:'2-3'},
      {key:'2-4',title:'四、二級(jí)標(biāo)題',parentId:'2'},
      {key:'2-4-1',title:'（一）三級(jí)標(biāo)題',parentId:'2-4'},
      {key:'2-4-2',title:'（二）三級(jí)標(biāo)題',parentId:'2-4'},
      {key:'2-5',title:'五、二級(jí)標(biāo)題',parentId:'2'},
      {key:'2-5-1',title:'（一）三級(jí)標(biāo)題',parentId:'2-5'},
      {key:'2-5-2',title:'（二）三級(jí)標(biāo)題',parentId:'2-5'},
      {key:'3',title:'第三部分',parentId:'-1'},
      {key:'3-1',title:'一、二級(jí)標(biāo)題',parentId:'3'},
      {key:'3-1-1',title:'（一）三級(jí)標(biāo)題',parentId:'3-1'},
      {key:'3-1-2',title:'（二）三級(jí)標(biāo)題',parentId:'3-1'},
      {key:'3-2',title:'二、二級(jí)標(biāo)題',parentId:'3'},
      {key:'3-2-1',title:'（一）三級(jí)標(biāo)題',parentId:'3-2'},
      {key:'3-2-2',title:'（二）三級(jí)標(biāo)題',parentId:'3-2'},
      {key:'3-3',title:'三、二級(jí)標(biāo)題',parentId:'3'},
      {key:'3-3-1',title:'（一）三級(jí)標(biāo)題',parentId:'3-3'},
      {key:'3-3-2',title:'（二）三級(jí)標(biāo)題',parentId:'3-3'},
      {key:'3-4',title:'四、二級(jí)標(biāo)題',parentId:'3'},
      {key:'3-4-1',title:'（一）三級(jí)標(biāo)題',parentId:'3-4'},
      {key:'3-4-2',title:'（二）三級(jí)標(biāo)題',parentId:'3-4'},
    ],
  }

  // 根據(jù)父級(jí)找到所有子級(jí)節(jié)點(diǎn)
  getByParentId(parentId){
    return this.state.data.filter(item => {
      return item.parentId === parentId;
    })
  }

  renderTreeNode = (parentId) => {
    // 先找到子級(jí)節(jié)點(diǎn)
    var tmp = this.getByParentId(parentId);
    if(tmp.length > 0){
      // 遍歷鋪頁(yè)面，如果數(shù)組長(zhǎng)度不為0則證明子級(jí)不為空
      return tmp.map(item =>{
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNode(item.key)}
          </TreeNode>
        );
      })
    }
  }

  render() {
    return (
      <Tree>
        {/*先找到所有parentId為-1的頂級(jí)節(jié)點(diǎn)*/}
        {this.renderTreeNode("-1")}
      </Tree>
    );
  }
}
tree-demo-v2

接下來就好辦了，刪除方法和右鍵響應(yīng)方法

  //簡(jiǎn)單處理，右鍵刪除
  handleRightClick = (e) =>{
    let key = e.node.props.dataRef.key;
    this.handleDelete(key)
  }
  
  //根據(jù)key刪除節(jié)點(diǎn)
  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的頂級(jí)節(jié)點(diǎn)*/}
          {this.renderTreeNode("-1")}
    </Tree>

效果：


image.png

同理，要對(duì)節(jié)點(diǎn)進(jìn)行其他遍歷操作就更方便，不會(huì)像第一次那樣做各種遞歸處理，給不同節(jié)點(diǎn)增加不同樣式，修改內(nèi)容等等，方便很多

鑒于樓下有個(gè)小伙伴，提問如何更換位置，今日有空，也實(shí)現(xiàn)出來，大家多多指導(dǎo)

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:'一、二級(jí)標(biāo)題',parentId:'1'},
      {key:'1-2',title:'二、二級(jí)標(biāo)題',parentId:'1'},
      {key:'1-3',title:'三、二級(jí)標(biāo)題',parentId:'1'},
      {key:'1-4',title:'四、二級(jí)標(biāo)題',parentId:'1'},
      {key:'2-1',title:'一、二級(jí)標(biāo)題',parentId:'2'},
      {key:'2-2',title:'二、二級(jí)標(biāo)題',parentId:'2'},
      {key:'2-3',title:'三、二級(jí)標(biāo)題',parentId:'2'},
      {key:'2-4',title:'四、二級(jí)標(biāo)題',parentId:'2'},
      {key:'2-5',title:'五、二級(jí)標(biāo)題',parentId:'2'},
      {key:'3-1',title:'一、二級(jí)標(biāo)題',parentId:'3'},
      {key:'3-2',title:'二、二級(jí)標(biāo)題',parentId:'3'},
      {key:'3-3',title:'三、二級(jí)標(biāo)題',parentId:'3'},
      {key:'3-4',title:'四、二級(jí)標(biāo)題',parentId:'3'},
      {key:'2-1-1',title:'（一）三級(jí)標(biāo)題',parentId:'2-1'},
      {key:'2-1-2',title:'（二）三級(jí)標(biāo)題',parentId:'2-1'},
      {key:'2-1-3',title:'（三）三級(jí)標(biāo)題',parentId:'2-1'},
      {key:'2-2-1',title:'（一）三級(jí)標(biāo)題',parentId:'2-2'},
      {key:'2-2-2',title:'（二）三級(jí)標(biāo)題',parentId:'2-2'},
      {key:'2-3-1',title:'（一）三級(jí)標(biāo)題',parentId:'2-3'},
      {key:'2-3-2',title:'（二）三級(jí)標(biāo)題',parentId:'2-3'},
      {key:'2-4-1',title:'（一）三級(jí)標(biāo)題',parentId:'2-4'},
      {key:'2-4-2',title:'（二）三級(jí)標(biāo)題',parentId:'2-4'},
      {key:'2-5-1',title:'（一）三級(jí)標(biāo)題',parentId:'2-5'},
      {key:'2-5-2',title:'（二）三級(jí)標(biāo)題',parentId:'2-5'},
      {key:'3-1-1',title:'（一）三級(jí)標(biāo)題',parentId:'3-1'},
      {key:'3-1-2',title:'（二）三級(jí)標(biāo)題',parentId:'3-1'},
      {key:'3-2-1',title:'（一）三級(jí)標(biāo)題',parentId:'3-2'},
      {key:'3-2-2',title:'（二）三級(jí)標(biāo)題',parentId:'3-2'},
      {key:'3-3-1',title:'（一）三級(jí)標(biāo)題',parentId:'3-3'},
      {key:'3-3-2',title:'（二）三級(jí)標(biāo)題',parentId:'3-3'},
      {key:'3-4-1',title:'（一）三級(jí)標(biāo)題',parentId:'3-4'},
      {key:'3-4-2',title:'（二）三級(jí)標(biāo)題',parentId:'3-4'},
    ],
  }

  // 根據(jù)父級(jí)找到所有子級(jí)節(jié)點(diǎn)
  getByParentId(parentId){
    return this.state.data.filter(item => {
      return item.parentId === parentId;
    })
  }

  renderTreeNode = (parentId) => {
    // 先找到子級(jí)節(jié)點(diǎn)
    let tmp = this.getByParentId(parentId);
    if(tmp.length > 0){
      // 遍歷鋪頁(yè)面，如果數(shù)組長(zhǎng)度不為0則證明子級(jí)不為空
      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)
  }
  /**
    * 上下移動(dòng)
    */
  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})
  }

  //根據(jù)key刪除節(jié)點(diǎn)
  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的頂級(jí)節(jié)點(diǎn)*/}
          {this.renderTreeNode("-1")}
        </Tree>
      </div>
    );
  }
}
result

鳴謝：感謝antd、umi 提供優(yōu)秀的前端框架
版權(quán)聲明：本文原創(chuàng)，轉(zhuǎn)載請(qǐng)聲明出處，謝謝

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1 序 2016年6月25日夜，帝都，天下著大雨，拖著行李箱和同學(xué)在校門口照了最后一張合照，搬離寢室打車去了提前租...
    RichardJieChen閱讀 5,371評(píng)論 0贊 12
  • 轉(zhuǎn)載：http://blog.codinglabs.org/articles/theory-of-mysql-in...
    qf1007閱讀 1,372評(píng)論 0贊 0
  • 等二十來歲，發(fā)現(xiàn)十來歲青春期中二病完全好了。當(dāng)初種種嫌棄父母的行為的原因，好像一夜之間消失不見。 ...
    苫一閱讀 151評(píng)論 0贊 0
  • 許多人對(duì)春天向來無甚好感，曾有一東北老師私下抱怨：江南氣候好在哪里?冬天冷死夏天熱死，春天不冷不熱下個(gè)把月的梅雨人...
    燕老六閱讀 370評(píng)論 0贊 0
  • 我爸是開店做小生意的，人家都說“無商不奸”，人家也說做生意能發(fā)大財(cái)，可是我爸完全活出這兩句話的反面。 我爸以前也是...
    讀寫拾光閱讀 409評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容