React丨antd tree 异步加载,只有首次点击加载,再次点击不加载

时间:2021-09-15
本文章向大家介绍React丨antd tree 异步加载,只有首次点击加载,再次点击不加载,主要包括React丨antd tree 异步加载,只有首次点击加载,再次点击不加载使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

一、环境版本

  • antd 3.x tree

二、树形结构

  • 02
    • 0201
      • 020105
        • ZB0201000024
  • 07
    • 0701
      • 070101
        • ZB0701010001

三、问题描述

  • 异步加载,首次点击加载,再次点击不加载

四、解决方案

  • onExpand:展开/收起节点时触发

  • onLoad:节点加载完毕时触发

  • loadedKeys:(受控)已经加载的节点,需要配合 loadData 使用

  • expandedKeys:(受控)展开指定的树节点

五、代码

state = {
    treeExpandedKeys: [], 	// tree 展开节点 ['string,'string']
    treeLoadedKeys: [], 	// tree 已经加载节点
}
<Tree
    className={styles.eleTree}
    checkStrictly={true}
    expandedKeys={treeExpandedKeys}
    showIcon
    blockNode
    onExpand={this.handleTreeExpand}
    onSelect={this.handleTreeSelect}
    loadData={this.onLoadData}
    onLoad={this.onLoadTree}
    loadedKeys={this.props.treeLoadedKeys}
    >
    {this.renderTreeNodes(treeData)}
</Tree>
handleTreeExpand = (keys) => {
    const { dispatch, treeExpandedKeys, treeLoadedKeys } = this.props
    let newLoadKeys = treeLoadedKeys
    // 判断当前是展开还是收起节点,当前展开的长度比之前的少,说明是收起
    if (treeExpandedKeys.length > keys.length) {
      // 当是收起的时候,把这个收起的节点从loadedKeys中移除
      // newLoadKeys = treeLoadedKeys.filter((i) => keys.includes(i))
      let newStr = ''
      treeLoadedKeys.map(item => {
        if (!keys.includes(item)) {
          newStr = item
        }
      })
      let newArr3 = []
      treeLoadedKeys.map(item => {
        if (this.treeExpandcheckStr(item, newStr)) {
          if (item.length < newStr.length) {
            newArr3.push(item)
          }
        } else {
          newArr3.push(item)
        }
      })
      newLoadKeys = newArr3
      keys = newArr3
    }
    dispatch({
      type: 'draw3/save',
      payload: {
        treeLoadedKeys: newLoadKeys,
        treeExpandedKeys: keys
      }
    })
}
onLoadTree = loadedKeys => {
    const { dispatch } = this.props
    dispatch({
      type: 'draw3/save',
      payload: {
        treeLoadedKeys: loadedKeys
      }
    })
}

原文地址:https://www.cnblogs.com/aivsok/p/15271558.html