企业级tree组件封装实现，即拿即用（附git地址）封装树组件

本文介绍了企业级tree组件的封装实现，提供了即拿即用的解决方案，并附上了git地址，该tree组件支持多级嵌套、拖拽排序、节点展开/折叠等功能，适用于企业级的文件管理系统、组织架构展示等场景，封装过程中注重组件的复用性和可扩展性，方便用户根据需求进行自定义和扩展，通过引入该组件，可以大大提高开发效率，降低开发成本，是前端开发中的一款实用工具。

企业级Tree组件封装实现：即拿即用（附Git地址）

在现代前端开发中，组件化开发已经成为一种主流趋势，Tree组件作为常见的UI组件之一，被广泛应用于企业级的后台管理系统、文件管理、目录结构展示等场景中，本文将详细介绍如何封装一个企业级Tree组件，并提供一个即拿即用的解决方案，同时附上完整的Git地址,方便开发者直接下载和使用。

背景与需求

在企业级应用中，Tree组件通常用于展示层级关系的数据结构，如文件目录、组织架构等,一个优秀的Tree组件需要满足以下几个关键需求：

1. 可扩展性：能够轻松添加自定义节点内容。
2. 交互性：支持节点的展开/收起、选中、拖拽等交互操作。
3. 性能：能够高效处理大量数据,避免性能瓶颈。
4. 样式：支持自定义主题和样式。
5. 数据绑定：能够方便地绑定到各种数据源。

技术选型

为了实现上述需求，我们选择了React作为框架，并使用Ant Design的Tree组件作为基础，进行二次封装，Ant Design的Tree组件功能强大且易于扩展，非常适合企业级应用,我们还会使用TypeScript来提升代码的可维护性和可读性。

实现步骤

创建项目结构

我们需要创建一个新的React项目,并安装必要的依赖：

npx create-react-app enterprise-tree-component
cd enterprise-tree-component
npm install antd @ant-design/icons react-dom typescript @types/react @types/react-dom --save

配置TypeScript：

npx tsc --init

封装Tree组件

在src目录下创建一个新的文件夹components，并在其中创建EnterpriseTree.tsx文件：

// src/components/EnterpriseTree.tsx
import React, { useState } from 'react';
import { Tree, Button, Checkbox } from 'antd';
import { MenuOutlined, FileOutlined, FolderOutlined, DeleteOutlined } from '@ant-design/icons';
import { ITreeNode } from './types'; // 定义TreeNode类型接口
import './EnterpriseTree.css'; // 自定义样式文件（可选）
interface EnterpriseTreeProps {
  data: ITreeNode[]; // 传入的数据源
  onNodeClick?: (selectedNodes: ITreeNode[]) => void; // 节点点击事件回调
  onNodeExpand?: (expandedKeys: string[]) => void; // 节点展开事件回调
}
const EnterpriseTree: React.FC<EnterpriseTreeProps> = ({ data, onNodeClick, onNodeExpand }) => {
  const [expandedKeys, setExpandedKeys] = useState<string[]>([]); // 保存展开节点的keys
  const [selectedNodes, setSelectedNodes] = useState<ITreeNode[]>([]); // 保存选中的节点数据
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true); // 是否自动展开父节点
  const [checkData, setCheckData] = useState<any>({}); // 保存checkbox数据（可选）
  const [checkedKeys, setCheckedKeys] = useState<string[]>([]); // 保存选中的keys（可选）
  const [checkedNodes, setCheckedNodes] = useState<ITreeNode[]>([]); // 保存选中的节点数据（可选）
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]); // 保存选中的keys（可选）
  const [selectedNodes, setSelectedNodes] = useState<ITreeNode[]>([]); // 保存选中的节点数据（可选）
  const [isCheckStrictly, setIsCheckStrictly] = useState<boolean>(false); // 是否严格选中（可选）
  const [isCheckAll, setIsCheckAll] = useState<boolean>(false); // 是否全选（可选）
  const [isCheckHalfHalf, setIsCheckHalfHalf] = useState<boolean>(false); // 是否半选（可选）
  const [isCheckDisabled, setIsCheckDisabled] = useState<boolean>(false); // 是否禁用选中（可选）
  const [isCheckStrictlyDisabled, setIsCheckStrictlyDisabled] = useState<boolean>(false); // 是否严格选中禁用（可选）
  const [isCheckHalfHalfDisabled, setIsCheckHalfHalfDisabled] = useState<boolean>(false); // 是否半选禁用（可选）
  const [isCheckAllDisabled, setIsCheckAllDisabled] = useState<boolean>(false); // 是否全选禁用（可选）
  const [isCheckOnlySingleNode, setIsCheckOnlySingleNode] = useState<boolean>(false); // 是否只能选中单个节点（可选）
  const [isCheckSingleDirectChild, setIsCheckSingleDirectChild] = useState<boolean>(false); // 是否只能选中单个直接子节点（可选）
  const [isCheckShowLine, setIsCheckShowLine] = useState<boolean>(true); // 是否显示连接线（可选）
  const [isCheckShowIcon, setIsCheckShowIcon] = useState<boolean>(true); // 是否显示图标（可选）
  const [isCheckShowTitle, setIsCheckShowTitle] = useState<boolean>(true); // 是否显示标题（可选）
  const [isCheckShowExpandIcon, setIsCheckShowExpandIcon] = useState<boolean>(true); // 是否显示展开图标（可选）
  const [isCheckShowParentIcon, setIsCheckShowParentIcon] = useState<boolean>(true); // 是否显示父节点图标（可选）
  const [isCheckLeafIcon, setIsCheckLeafIcon] = useState<React.ReactNode | undefined>(); // 自定义叶子节点图标（可选）
  const [isCheckRenderTitle, setIsCheckRenderTitle] = useState<React.ReactNode | undefined>(); // 自定义渲染标题（可选）
  const [isCheckRenderExpandIcon, setIsCheckRenderExpandIcon] = useState<React.ReactNode | undefined>(); // 自定义渲染展开图标（可选）
  const [isCheckRenderParentIcon, setIsCheckRenderParentIcon] = useState<React.ReactNode | undefined>(); // 自定义渲染父节点图标（可选）
  const [isLeafClassname, setIsLeafClassname] = useState<string | undefined>(); // 叶子节点自定义类名（可选）
  const [isLineClassname, setIsLineClassname] = useState<string | undefined>(); // 连接线自定义类名（可选）
  const [isParentClassname, setIsParentClassname] = useState<string | undefined>(); // 父节点自定义类名（可选）
  const [isIconClassname, setIsIconClassname] = useState<string | undefined>(); // 图标自定义类名（可选）
  const [isTitleClassname, setIsTitleClassname] = useState<string | undefined>(); // 标题自定义类名（可选）
  const [isExpandIconClassname, setIsExpandIconClassname] = useState<string | undefined>(); // 展开图标自定义类名（可选）
  const [isParentIconClassname, setIsParentIconClassname] = useState<string | undefined>(); // 父节点图标自定义类名（可选）
  const [isDraggable, setIsDraggable] = useState<boolean>(true); // 是否支持拖拽（可选）
  const [onDragEnter, setOnDragEnter] = useState<(event: React.DragEvent) => void>(); // 拖拽进入事件回调（可选）
  const [onDragLeave, setOnDragLeave] = useState<(event: React.DragEvent) => void>(); // 拖拽离开事件回调（可选）
  const [onDragOver, setOnDragOver] = useState<(event: React.DragEvent) => void>(); // 拖拽经过事件回调（可选）
  const [onDragStart, setOnDragStart] = useState<(event: React.DragEvent) => void>(); // 拖拽开始事件回调（可选）
  const [onDragEnd, setOnDragEnd] = useState<(event: React.DragEvent) => void>(); // 拖拽结束事件回调（可选）
  const [onDrop, setOnDrop] = useState<(event: React.DragEvent) => void>(); // 放置事件回调（可选）
  const [onDropBeforeDropKey, setOnDropBeforeDropKey] = useState<(key: string) => void>(); // 在放置之前的事件回调（可选）
  const [onDropAfterDropKey, setOnDropAfterDropKey] = useState<(key: string) => void>(); // 在放置之后的事件回调（可选）
  const [onDropBeforeDropNode, setOnDropBeforeDropNode] = useState<(node: ITreeNode) => void>(); // 在放置之前的事件回调（可选）
  const [onDropAfterDropNode, setOnDropAfterDropNode] = useState<(node: ITreeNode) => void>(); // 在放置之后的事件回调（可选）
  // ... 其他状态管理 (根据需求添加) ... 省略了部分代码以节省空间，可以根据需要添加更多状态管理，是否禁用某些功能、是否显示某些元素等，但请注意保持代码简洁和清晰，在实际项目中可以根据具体需求进行扩展和修改，这里只展示了部分代码作为示例，完整代码请参见附上的Git仓库地址。} const renderTreeNodes = (