在antd tree组件基础上封装一个文件目录树

背景

最近公司所做的项目中有个文档管理的需求，需要有个目录来展示不同的文档。可以对文档目录进行添加、重命名、删除、切换等操作。但是antd的tree组件不能完全满足需要，于是就进行了二次封装。

先看看效果图：

难点

主要的难点是这个hover按钮，之前没什么思路。后来想一想，可以放在数据中的title里面，antd中的数据都可以将一段jsx放进去。如下：

const TreeTitle = (props) => {
      const { title, id } = props;
      return (
        
          {title}
          {id === 'root' ? null : (
            }
              placement="rightTop"
            >
              
            
          )}
        
      );
    };

这里的root要注意一下，上面的效果图中的所有类别的id就是root，这是我手动添加到类别数组中的，不是后端返回的，所以不需要hover图标，才加了上面这一层处理。

然后用了递归生成目录树所需的数据结构，如下：

// 加工后端返回的treedata，给title加上hover显示图标
    const gernerateTreeData = (data) => {
      data = data.map((item) => {
        if (item.children && item.children.length) {
          return {
            key: item.key,
            title: ,
            children: gernerateTreeData(item.children),
          };
        } else {
          return {
            key: item.key,
            title: ,
          };
        }
      });
      return data;
    };

html部分就比较简单，如下：

        
          }
            style={{ marginLeft: '10px', marginBottom: '10px', width: '120px' }}
            size="small"
            allowClear
            onChange={this.handleSearch}
          />
           this.showAddConfirm('add')}
            disabled={this.state.isEditing}
          >
            
          
        

        {this.state.treeData.length ? (
          }
            onSelect={this.select}
          >
        ) : null}
      

最终效果还是不错的，达到了业务的要求。完美！ 洗洗睡。