如何为Ant Design Tree的每个节点添加3个图标？

要给Tree的每个节点添加3个图标，你需要自定义节点的标题区域——因为默认的icon属性只能挂载单个元素。下面是两种可行的实现方式：

方法1：构造treeData时直接定义带图标的title #

修改你的flattenData函数，把每个节点的title从纯文本改成包含文本+多个图标的React元素：

import { Tree, DownOutlined, DeleteOutlined, EditOutlined, EyeOutlined } from 'antd';
import { useState } from 'react';

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

    const flattenData = (data) => {
        if (!data) return [];
        return data.map((item) => ({
            title: (
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <span>{item.title}</span>
                    <EyeOutlined style={{ color: '#1890ff' }} />
                    <EditOutlined style={{ color: '#52c41a' }} />
                    <DeleteOutlined style={{ color: '#ff4d4f' }} />
                </div>
            ),
            key: item.id,
            children: flattenData(item.childs || item.child)
        }));
    };
    const treeData = flattenData(chart);

    const onSelect = (selectedKeys) => {
        setChildtId(selectedKeys)
    };
    const onExpand = (keys) => {
        setParentId(keys)
    };

    return (
        <Tree
            showLine
            switcherIcon={<DownOutlined />}
            onSelect={onSelect}
            onExpand={onExpand}
            treeData={treeData}
        />
    );
};
export default ChartMaker;

方法2：使用Tree的renderTitle属性统一渲染 #

如果不想修改treeData的结构，可以用Tree组件提供的renderTitle属性，对每个节点的标题进行自定义渲染：

import { Tree, DownOutlined, DeleteOutlined, EditOutlined, EyeOutlined } from 'antd';
import { useState } from 'react';

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

    const flattenData = (data) => {
        if (!data) return [];
        return data.map((item) => ({
            title: item.title,
            key: item.id,
            children: flattenData(item.childs || item.child)
        }));
    };
    const treeData = flattenData(chart);

    const onSelect = (selectedKeys) => {
        setChildtId(selectedKeys)
    };
    const onExpand = (keys) => {
        setParentId(keys)
    };

    // 自定义标题渲染函数
    const renderTitle = (node) => {
        return (
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                <span>{node.title}</span>
                <EyeOutlined style={{ color: '#1890ff' }} />
                <EditOutlined style={{ color: '#52c41a' }} />
                <DeleteOutlined style={{ color: '#ff4d4f' }} />
            </div>
        )
    }

    return (
        <Tree
            showLine
            switcherIcon={<DownOutlined />}
            onSelect={onSelect}
            onExpand={onExpand}
            treeData={treeData}
            renderTitle={renderTitle}
        />
    );
};
export default ChartMaker;

关键补充说明 #

1. 修正了原代码中flattenData的递归错误，改为flattenData(item.childs || item.child)避免重复递归
2. 用flex布局包裹文本和图标，保证排版对齐，通过gap控制图标间距
3. 如果需要给图标添加点击事件，需阻止事件冒泡避免触发Tree节点的默认选择逻辑：

<DeleteOutlined 
    style={{ color: '#ff4d4f' }} 
    onClick={(e) => {
        e.stopPropagation();
        // 执行你的删除逻辑
    }}
/>

内容的提问来源于stack exchange，提问作者Shingo