利用antd tree组件实现类文件夹树(文件夹图标跟随树展开状态)

以下是一个使用Ant Design的Tree组件实现类似文件夹树的简单示例，其中文件夹图标会随着节点的展开收起状态变化。

import React from 'react';
import { Tree } from 'antd';
import { FolderOpenOutlined, FolderOutlined } from '@ant-design/icons';
 
const TreeWithFolderIcons = () => {
  const treeData = [
    {
      title: 'parent 1',
      key: '0-0',
      icon: <FolderOutlined />,
      children: [
        { title: 'child 1', key: '0-0-0', icon: <FolderOutlined /> },
        { title: 'child 2', key: '0-0-1', icon: <FolderOutlined /> },
      ],
    },
    // 更多树节点...
  ];
 
  const renderTreeNodes = (data) =>
    data.map((item) => {
      if (item.children) {
        return (
          <Tree.TreeNode
            key={item.key}
            title={
              <span>
                {item.icon}
                {item.title}
              </span>
            }
          >
            {renderTreeNodes(item.children)}
          </Tree.TreeNode>
        );
      }
      return (
        <Tree.TreeNode
          key={item.key}
          title={
            <span>
              {item.icon}
              {item.title}
            </span>
          }
        />
      );
    });
 
  return <Tree defaultExpandedKeys={['0-0']} switcherIcon={<FolderOpenOutlined />}>{renderTreeNodes(treeData)}</Tree>;
};
 
export default TreeWithFolderIcons;

在这个例子中，我们定义了一个名为TreeWithFolderIcons的函数组件，它使用Ant Design的Tree组件和FolderOutlined和FolderOpenOutlined图标。treeData变量包含树的结构，renderTreeNodes函数递归地渲染每个节点，并根据节点是否有子节点来改变图标。defaultExpandedKeys属性用于设置默认展开的节点。switcherIcon属性用于定义节点图标，当节点展开时会显示。