以下是一个使用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属性用于定义节点图标，当节点展开时会显示。