使用Ant Design UI库实现异步加载树形结构文件夹管理

import { Tree } from 'antd'
const { TreeNode, DirectoryTree } = Tree
...
render() {
    const { tree: { treeData } } = this.props
    return(
        <DirectoryTree checkable>
            {
            treeData.map(item => (
              <TreeNode key={item.key}
                isLeaf={item.isLeaf}
                title={item.title}
                icon={<img src={item.icon} className={styles.icon}/>}
                dataRef={item} />))
          }
        </DirectoryTree>  
    )
}

render() {
    const { tree: { treeData } } = this.props
    return(
        <DirectoryTree checkable>
            {{this.renderTreeNodes(treeData)}}
        </DirectoryTree>  
    )
}
...
  renderTreeNodes = data => data.map(item => {
    if (item.children) {
      return (
        <TreeNode key={item.key}
        isLeaf={item.isLeaf}
        title={item.title}
        icon={<img src={item.icon} className={styles.icon}/>}>
          {this.renderTreeNodes(item.children)}
        </TreeNode>
      );
    }
    return <TreeNode key={item.key}
        isLeaf={item.isLeaf}
        title={item.title}
        icon={<img src={item.icon} className={styles.icon}/>} 
        />;
  });

render() {
    const { tree: { treeData } } = this.props
    return(
        <DirectoryTree checkable
        loadData={this.onLoadData}>
            {{this.renderTreeNodes(treeData)}}
        </DirectoryTree>
    )
}
...
componentDidMount() {
    // 获取根目录数据，也就是treeData第一层数据
    this.fetchGetFile(0)
}
...
fetchGetFile = (folder_id) => {
    const {
      dispatch,
    } = this.props
    dispatch({
      type: 'tree/getFolderTreeList',
      payload: {
        folder_id,
      },
    })
}
...
onLoadData = treeNode => new Promise(resolve => {
    const { children, eventKey } = treeNode.props
    // 判断节点是否有children属性，有的话，就不需要异步加载
    if (children) {
      resolve();
      return;
    }
    // 增加500ms延迟，加载圈出来，优化用户体验
    // 让用户知道子文件或文件是异步加载出来的
    setTimeout(() => {
      // 获取当前节点的key，能获取点击目录这层的数据
      this.fetchGetFile(parseInt(eventKey, 10))
      resolve()
    }, 500);
});
...
namespace: 'tree',
effects:{
    // 获取一层的目录数据
    * getFolderTreeList({ payload }, { call, put, select }) {
      const url = '/partner/folder/get'
      const response = yield call(sendPostRequest, url, payload)
      if (response && response.retcode === 'success') {
        const { children } = response.data
        let treeData = yield select(state => state.tree.treeData);
        if (treeData.length === 0) {
          // 如果是第一层，则是获取根目录数据的操作
          // 将后台的数据转成tree格式的数据，放入treeData
          treeData = dataToTree(children)
        } else {
          // 如果不是第一层，则是展开目录的操作
          // 递归treeData数据，找到点击的目录id对象
          // 新增children字段存放单层数据
          treeData = mapTree(treeData, payload.folder_id, dataToTree(children))
        }
        yield put({
          type: 'save',
          payload: {
            treeData,
          },
        })
      } else {
        notification.error({ message: response.description });
      }
    },
}
...
// 数据换成树形结构数据
const dataToTree = data => {
  const treeData = []
  if (data.length > 0) {
    data.map(item => {
      let tree = {}
      if (item.file_count === 0 && item.folder_count === 0) {
        tree.isLeaf = true
      } else {
        tree.isLeaf = false
      }
      tree.title = item.name
      tree.key = item.id
      tree.icon = item.icon_url
      treeData.push(tree)
    })
  }
  return treeData
}
...
// 递归遍历存children
const mapTree = (treeData, id, childTreeData) => {
  treeData.map(tree => {
    // 如果有文件夹或文件
    if (!tree.isLeaf) {
      // 判断该文件夹id是否等于点击的目录id
      // 等于则新增children
      if (tree.key === id) {
        tree.children = childTreeData
      } else if (tree.children) {
      // 判断当前文件夹是否还有子文件夹或文件，有的话，继续递归
        mapTree(tree.children, id, childTreeData)
      }
    }
  })
  return treeData
}

render() {
    const { tree: { treeData, checkedKeys } } = this.props
    return(
        <DirectoryTree checkable
        loadData={this.onLoadData}
        checkedKeys={checkedKeys}
        onCheck={this.onCheck}
        >
            {{this.renderTreeNodes(treeData)}}
        </DirectoryTree>
    )
}
...
onCheck = (checkeds) => {
    const { dispatch } = this.props
    dispatch({
      type: 'tree/save',
      payload: {
        checkedKeys: checkeds,
      },
    })
};
...
namespace: 'tree',
reducers:{
    save(state, { payload }) {
      return {
        ...state,
        ...payload,
      }
    },
}

render() {
    const { tree: { checkedCount, total } } = this.props
    return(
        <div className={styles.title}>
            已选择授权文件({checkedCount || 0}/{total || 0})
        </div>
    )
}
...
onCheck = (checkeds) => {
    const { dispatch, tree: { treeData } } = this.props
    let checkedKeys = []
    let checkedCount = 0
    const mapTree = (trees, keys, list) => trees.map(tree => {
      const key = tree.key.toString()
      if (keys.includes(key)) {
        list.push(key)
        checkedKeys = list
        // 新增的逻辑
        checkedCount += tree.count
      } else if (tree.children) {
        mapTree(tree.children, keys, list)
      }
    })
    mapTree(treeData, checkeds, [])
    dispatch({
      type: 'tree/save',
      payload: {
        checkedKeys,
        checkedCount, // 新增的checkedCount
      },
    })
};

namespace: 'tree',
effects:{
    // 获取一层的目录数据
    * getFolderTreeList({ payload }, { call, put, select }) {
      const url = '/partner/folder/get'
      const response = yield call(sendPostRequest, url, payload)
      if (response && response.retcode === 'success') {
        const { children } = response.data
        let treeData = yield select(state => state.tree.treeData);
        if (treeData.length === 0) {
          treeData = dataToTree(children)
          // 新增的逻辑
          yield put({
            type: 'save',
            payload: {
              total: file_count,
            },
          })
        } else {
          ...
        }
        ...
      } else {
        notification.error({ message: response.description });
      }
    },
}

render() {
    const { tree: { checkedTags } } = this.props
    return(
        <div className={styles.tags}>
              {checkedTags.map(file => (
                <div className={styles.tag_container} key={file.id}>
                  <div className={styles.tag}>{file.name}</div>
                  <div className={styles.close} onClick={() => { this.delChecked(file.id) }}></div>
                </div>
              ))}
        </div>
    )
}
...
onCheck = (checkeds) => {
    const { dispatch, tree: { treeData } } = this.props
    let checkedKeys = []
    let checkedCount = 0
    let checkedTags = []
    const mapTree = (trees, keys, list) => trees.map(tree => {
      const key = tree.key.toString()
      if (keys.includes(key)) {
        list.push(key)
        checkedKeys = list
        checkedCount += tree.count
        // 新增的逻辑
        checkedTags.push({ id: key, name: tree.title, count: tree.count })
      } else if (tree.children) {
        mapTree(tree.children, keys, list)
      }
    })
    mapTree(treeData, checkeds, [])
    dispatch({
      type: 'tree/save',
      payload: {
        checkedKeys,
        checkedCount,
        checkedTags, // 新增的checkedTags
      },
    })
};
...
// 删除的逻辑，通过findIndex找到点击删除的id
// 匹配到，则将其删除，删除的还挺多的
// 包括treeData选中checkedKeys，标签信息checkedTags，及已选择数量checkedCount
delChecked = (id) => {
    const { tree: { checkedTags, checkedKeys }, dispatch } = this.props
    let checkedCount = 0
    checkedKeys.splice(checkedKeys.findIndex(item => item === id), 1)
    checkedTags.splice(checkedTags.findIndex(item => item.id === id), 1)
    checkedTags.map(checked => {
      checkedCount += checked.count
    })
    dispatch({
      type: 'tree/save',
      payload: {
        checkedKeys,
        checkedTags,
        checkedCount,
      },
    })
  }

namespace: 'tree',
effects:{
    // 获取一层的目录数据
    * getFolderTreeList({ payload }, { call, put, select }) {
      const url = '/partner/folder/get'
      const response = yield call(sendPostRequest, url, payload)
      if (response && response.retcode === 'success') {
        const { children } = response.data
        let treeData = yield select(state => state.tree.treeData);
        if (treeData.length === 0) {
          treeData = dataToTree(children)
          // 新增的逻辑
          yield put({
            type: 'getGrantInfo',
            payload: {
              target_id: payload.target_id,
            },
          })
        } else {
          ...
        }
        yield put({
          type: 'save',
          payload: {
            treeData,
          },
        })
      } else {
        notification.error({ message: response.description });
      }
    },
}
...
// 可以获取到选中的文件夹或文件信息
* getGrantInfo({ payload }, { call, put }) {
      const url = '/partner/folder/grant-info'
      const response = yield call(sendPostRequest, url, payload)
      if (response && response.retcode === 'success') {
        let grant = response.data
        let checkedCount = 0
        const checkedKeys = []
        const checkedTags = []
        let needRequestIds = []
        grant.grant_list.map(e => {
          let count = e.obj_type === 'folder' ? e.file_count : 1
          checkedCount += count
          checkedTags.push({ id: e.id.toString(), name: e.name, count })
          checkedKeys.push(e.id.toString())
          // 获取选中的文件或文件夹的父目录id，将其放在一个目录里面
          needRequestIds.push(...e.parent_path_list)
        })
        // 遍历去请求
        // 将所有父目录id去重
        needRequestIds = Array.from(new Set(needRequestIds))
        // 删除当前父目录id，可以不用请求
        needRequestIds.splice(needRequestIds.findIndex(item => item === payload.pid.toString()), 1)
        const delay = (timeout) => new Promise((resolve) => {
          setTimeout(resolve, timeout);
        })
        // 得到最终的父目录id集合，同步请求它们
        for (let i = 0; i < needRequestIds.length; i++) {
          // 同步的时候延迟50ms
          yield call(delay, 50);
          yield put({
            type: 'getFolderTreeList',
            payload: {
              partner_id: localStorage.getItem('partnerId'),
              folder_id: parseInt(needRequestIds[i], 10),
              target_id: payload.target_id,
            },
          })
        }
        // treeData生成树形DOM结构需要时间，再延迟200ms
        yield call(delay, 200);
        // 最后赋值checkedKeys，渲染出全选、半选、取消状态
        // 赋值checkedTags，出来标签信息
        // 赋值checkedCount，出来选中数量
        yield put({
          type: 'save',
          payload: {
            checkedCount,
            checkedKeys,
            checkedTags,
          },
        })
      } else {
        notification.error({ message: response.description });
      }
},

namespace: 'tree',
effects:{
    // 获取一层的目录数据
    * getFolderTreeList({ payload }, { call, put, select }) {
      const url = '/partner/folder/get'
      const response = yield call(sendPostRequest, url, payload)
      if (response && response.retcode === 'success') {
        const { children } = response.data
        let treeData = yield select(state => state.tree.treeData);
        if (treeData.length === 0) {
          treeData = dataToTree(children)
          // 新增的逻辑，多传个children
          yield put({
            type: 'getGrantInfo',
            payload: {
              target_id: payload.target_id,
              children,
            },
          })
        } else {
          // 新增的逻辑，判断当前children中是否存在选中的ids
          // 存在则赋值checkedKeys、checkedTags渲染出选中状态和标签信息
          const defaultCheckedKeys = yield select(state => state.tree.defaultCheckedKeys);
          checkedKeys = yield select(state => state.tree.checkedKeys);
          checkedTags = yield select(state => state.tree.checkedTags);
          children.map(child => {
            if (defaultCheckedKeys.some(id => id === child.id)) {
              let count = child.obj_type === 'folder' ? child.file_count : 1
              checkedKeys.push(child.id.toString())
              checkedTags.push({ id: child.id.toString(), name: child.name, count })
            }
          })
        }
        yield put({
          type: 'save',
          payload: {
            treeData,
          },
        })
      } else {
        notification.error({ message: response.description });
      }
    },
}
...
// 获取资源管理所有文件列表
    * getGrantInfo({ payload }, { call, put }) {
      const url = '/partner/folder/grant-info'
      const response = yield call(sendPostRequest, url, payload)
      if (response && response.retcode === 'success') {
        let grant = response.data
        let checkedCount = 0
        const checkedKeys = []
        const checkedTags = []
        const defaultCheckedKeys = []
        let needRequestIds = []
        // 新增的逻辑，判断当前children中是否存在选中的ids
        // 存在则赋值checkedKeys、checkedTags渲染出选中状态和标签信息
        payload.children.map(child => {
          if (grant.grant_list.some(item => item.id === child.id)) {
            let count = child.obj_type === 'folder' ? child.file_count : 1
            checkedKeys.push(child.id.toString())
            checkedTags.push({ id: child.id.toString(), name: child.name, count })
          }
        })
        grant.grant_list.map(e => {
          let count = e.obj_type === 'folder' ? e.file_count : 1
          checkedCount += count
          defaultCheckedKeys.push(e.id)
          // 获取选中的文件或文件夹的父目录id，将其放在一个目录里面
          needRequestIds.push(...e.parent_path_list)
        })
        // 赋值checkedCount，渲染选中数量
        yield put({
          type: 'save',
          payload: {
            checkedCount,
            defaultCheckedKeys,
            checkedKeys,
            checkedTags,
          },
        })
        // 遍历去请求
        // 将所有父目录id去重
        needRequestIds = Array.from(new Set(needRequestIds))
        // 删除当前父目录id，可以不用请求
        needRequestIds.splice(needRequestIds.findIndex(item => item === payload.pid.toString()), 1)
        const delay = (timeout) => new Promise((resolve) => {
          setTimeout(resolve, timeout);
        })
        // 得到最终的父目录id集合，同步请求它们
        for (let i = 0; i < needRequestIds.length; i++) {
          // 同步的时候延迟50ms
          yield call(delay, 50);
          yield put({
            type: 'getFolderTreeList',
            payload: {
              partner_id: localStorage.getItem('partnerId'),
              folder_id: parseInt(needRequestIds[i], 10),
              target_id: payload.target_id,
            },
          })
        }
      } else {
        notification.error({ message: response.description });
      }
},