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

最新推荐文章于 2024-05-01 18:48:06 发布

原创

最新推荐文章于 2024-05-01 18:48:06 发布 · 3.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #antd #tree #可编辑 #目录树

本文档介绍了如何使用Ant Design（Antd）的Tree组件进行二次封装，以满足文档管理中添加、重命名、删除和切换目录的需求。主要难点在于实现hover按钮，通过在数据的title中插入jsx解决。通过递归处理生成树形结构，并展示了实现的代码片段。最终实现了符合业务需求的目录管理功能。

背景

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

先看看效果图：
在这里插入图片描述

难点

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

const TreeTitle = (props) => {
      const { title, id } = props;
      return (
        <React.Fragment>
          <span>{title}</span>
          {id === 'root' ? null : (
            <Popover
              content={<PopoverContent id={id} title={title} />}
              placement="rightTop"
            >
              <MoreOutlined className="icon-operate" />
            </Popover>
          )}
        </React.Fragment>
      );
    };

这里的root要注