本文详解如何在 Ant Design 的 Tree 组件中为每个节点（包括父节点和叶子节点）动态渲染不同图标，通过扩展 treeData 数据结构并正确使用 icon 属性实现灵活、语义化的图标展示。

本文详解如何在 ant design 的 tree 组件中为每个节点（包括父节点和叶子节点）动态渲染不同图标，通过扩展 `treedata` 数据结构并正确使用 `icon` 属性实现灵活、语义化的图标展示。

Ant Design 的 Tree 组件支持为每个节点单独配置图标，关键在于：必须将 icon 作为节点数据对象的属性传入 treeData，而非在 <Tree> 标签内嵌套 <TreeNode>（该写法已废弃且无效）。你当前代码中 <TreeNode icon={<DeleteOutlined />} /> 是错误用法——现代 Ant Design（v4+）已移除 TreeNode 作为子元素的 API，所有节点必须通过 treeData 数组声明。

✅ 正确做法：在 flattenData 中注入 icon 属性

你需要在扁平化数据时，根据节点类型（有子节点 / 无子节点）动态分配图标。例如：

React Best Practices 2 0.1.0

React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。

下载

const flattenData = (data) => {
  if (!data) return [];
  return data.map((item) => ({
    title: item.title,
    key: item.id,
    // ✅ 关键：为每个节点显式指定 icon
    icon: item.childs?.length || item.child?.length 
      ? <FolderOutlined />   // 有子节点 → 文件夹图标
      : <FileOutlined />,     // 叶子节点 → 文件图标
    // 注意：children 必须递归调用 flattenData，且仅传一个参数
    children: [
      ...flattenData(item.childs || []),
      ...flattenData(item.child ? [item.child] : [])
    ]
  }));
};

⚠️ 注意：原代码中 flattenData(item.childs, flattenData(item.child)) 存在两个问题：

1. flattenData 只接受一个参数，第二个参数会被忽略；
2. item.child 若为单个对象（非数组），需包裹为 [item.child] 再传入。

? 完整修正后的组件示例

import { Tree, DownOutlined, FolderOutlined, FileOutlined } from 'antd';
import { useState } from 'react';

const ChartMaker = ({ chart }) => {
  const [parentId, setParentId] = useState([]);
  const [childId, setChildId] = useState([]);

  const flattenData = (data = []) => {
    return data.map((item) => ({
      title: item.title,
      key: item.id,
      icon: item.childs?.length || item.child?.length 
        ? <FolderOutlined /> 
        : <FileOutlined />,
      children: [
        ...flattenData(item.childs || []),
        ...flattenData(Array.isArray(item.child) ? item.child : item.child ? [item.child] : [])
      ]
    }));
  };

  const treeData = flattenData(chart);

  const onSelect = (selectedKeys) => {
    setChildId(selectedKeys);
  };

  const onExpand = (expandedKeys) => {
    setParentId(expandedKeys);
  };

  return (
    <Tree
      showLine
      switcherIcon={<DownOutlined />}
      onSelect={onSelect}
      onExpand={onExpand}
      treeData={treeData} // ✅ 所有节点信息（含 icon）均由 treeData 驱动
      // ❌ 移除所有 <TreeNode> 子元素 —— 已不支持
    />
  );
};

export default ChartMaker;

? 补充说明与最佳实践

• 图标来源：推荐使用 Ant Design 内置图标（如 FolderOutlined、FileOutlined、DeleteOutlined），确保样式统一且按需加载；
• 动态图标逻辑：可进一步扩展，例如根据 item.type 字段返回不同图标（<DatabaseOutlined />、<PieChartOutlined /> 等），提升可视化语义；
• 性能提示：避免在 icon 中创建新 React 元素（如 icon={() => <DeleteOutlined />}），应直接传入已实例化的 JSX 元素，防止不必要的重渲染；
• 空节点处理：确保 item.id 唯一且非空，否则 key 冲突会导致渲染异常。

通过以上改造，每个树节点将精准显示对应图标，结构清晰、可维护性强，完全符合 Ant Design 最新规范。