如何在Antd动态生成的React Sider菜单项右侧添加删除按钮

要实现这个需求，核心是把菜单项的label改成包含原名称和删除按钮的React元素，同时维护菜单数据的状态来实现动态更新。具体做法如下：

完整实现代码 #

import { useState } from 'react';
import { Menu, Button, ContactsOutlined } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import type { MenuItem } from 'antd/es/menu/hooks';

// 初始菜单数据（根据你的实际业务调整）
const initialData = [
  { name: '地址1', id: '1' },
  { name: '地址2', id: '2' },
  { name: '地址3', id: '3' },
];

function MySider() {
  // 用useState维护菜单数据，删除后自动更新视图
  const [menuData, setMenuData] = useState(initialData);

  // 删除指定ID的菜单项
  const handleDeleteItem = (itemId: React.Key) => {
    setMenuData(prevData => prevData.filter(item => item.id !== itemId));
  };

  function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
  ): MenuItem {
    return { key, icon, children, label } as MenuItem;
  }

  // 动态生成带删除按钮的菜单项
  const items = menuData.map(address => getItem(
    // 用flex布局让名称和按钮分开展示
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
      <span>{address.name}</span>
      <Button 
        type="text" 
        icon={<DeleteOutlined />} 
        onClick={(e) => {
          e.stopPropagation(); // 阻止点击按钮时触发菜单的onClick事件
          handleDeleteItem(address.id);
        }}
        size="small"
        danger
      />
    </div>,
    address.id,
    <ContactsOutlined />
  ));

  const clickMenu = (e: any) => {
    // 原有的菜单点击逻辑
    console.log('菜单项被点击:', e.key);
  };

  return (
    <Menu
      onClick={clickMenu}
      theme="dark"
      mode="inline"
      items={items}
    />
  );
}

export default MySider;

关键要点 #

• 状态管理：用useState存储菜单数据，删除操作后通过setMenuData更新数组，菜单会自动重新渲染
• Label自定义：将label从单纯的字符串改成包含按钮的React元素，用flex布局保证名称和按钮的排版
• 事件隔离：给删除按钮添加e.stopPropagation()，避免点击按钮时触发菜单本身的onClick事件
• 删除逻辑：通过过滤数组移除对应ID的项，实现菜单项的删除

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