如何在 antd 菜单项的右侧添加按钮

Question

我想用 antd 在 React 中创建一个 Sider。我动态地用物品填充 sider。因此我有函数 getItem() 来创建一个项目。现在我想在项目标签旁边添加一个按钮来删除该项目。不幸的是我没有找到解决这个问题的方法。

const result= data.map(address => getItem(address.name, address.id, <ContactsOutlined />));

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


<Menu
  onClick={clickMenu}
  theme="dark"
  mode="inline"
  items={items}
/>

Answer 1

Label 接受 ReactNode 作为 propType。你可以拥有

label: <Space direction="horizontal">{labelString} <Button danger>Delete</Button>

您可以在 getItem 中进行此操作，以将标签作为 ReactNode 返回，如上所述。