如何在Antd组件库中从Menu向菜单项传递props？

针对你遇到的Antd菜单无法传递project.id的问题，有两种直接可行的解决方案，以下是具体实现：

方法一：将菜单配置改为接收ID的函数 #

把固定的menuItems改成可接收projectId的函数，在Table行渲染时动态生成绑定当前行ID的菜单选项：

import styled from '@emotion/styled';
import { ListProps } from '../types';
import { Table, Dropdown, Menu, Button } from 'antd';
import dayjs from 'dayjs';
import { Link } from 'react-router-dom';
import { Pin } from 'components/Pin';
import { useEditProject } from 'utils/project';
import { DeleteOutlined, EditOutlined, MoreOutlined } from '@ant-design/icons';
import { useProjectModal } from '../hooks/useProjectModal';
import type { MenuProps } from 'antd';

const ButtonItem = styled(Button)`
  // 自定义样式
`;

const List = ({ users, ...props }: ListProps) => {
  const { startEdit } = useProjectModal();
  const { mutate } = useEditProject();
  
  const pinProject = (id: number) => (pin: boolean) => mutate({ id, pin });
  const editProject = (id: number) => () => startEdit(id);
  // 假设的删除函数
  const deleteProject = (id: number) => () => {
    // 执行删除逻辑，比如调用接口
    console.log('删除项目:', id);
  };

  // 改为接收projectId的函数，动态生成绑定ID的菜单
  const getMenuItems = (projectId: number) => [
    {
      key: 'edit',
      label: <ButtonItem type="link">Edit</ButtonItem>,
      icon: <EditOutlined />,
      onClick: editProject(projectId)
    },
    {
      key: 'delete',
      label: <ButtonItem type="link">Delete</ButtonItem>,
      icon: <DeleteOutlined />,
      onClick: deleteProject(projectId)
    }
  ];

  return (
    <Table
      rowKey={'id'}
      columns={[
        {
          render(value, project) {
            return (
              <Dropdown
                overlay={<Menu items={getMenuItems(project.id)} />}
                trigger={['click']}
              >
                <MoreOutlined />
              </Dropdown>
            );
          }
        }
        // 其他列配置...
      ]}
      {...props}
    ></Table>
  );
};

export default List;

方法二：利用Menu的onClick事件统一处理 #

保持原菜单配置不变，在Table行渲染时定义菜单点击事件，直接访问当前行的project.id：

// 导入和基础定义与方法一一致

const List = ({ users, ...props }: ListProps) => {
  const { startEdit } = useProjectModal();
  const { mutate } = useEditProject();
  
  const pinProject = (id: number) => (pin: boolean) => mutate({ id, pin });
  const editProject = (id: number) => () => startEdit(id);
  const deleteProject = (id: number) => () => {
    console.log('删除项目:', id);
  };

  // 保持原固定菜单配置
  const menuItems = [
    {
      key: 'edit',
      label: <ButtonItem type="link">Edit</ButtonItem>,
      icon: <EditOutlined />
    },
    {
      key: 'delete',
      label: <ButtonItem type="link">Delete</ButtonItem>,
      icon: <DeleteOutlined />
    }
  ];

  return (
    <Table
      rowKey={'id'}
      columns={[
        {
          render(value, project) {
            // 行内定义菜单点击逻辑，直接获取当前project.id
            const handleMenuClick: MenuProps['onClick'] = (e) => {
              switch(e.key) {
                case 'edit':
                  editProject(project.id)();
                  break;
                case 'delete':
                  deleteProject(project.id)();
                  break;
                default:
                  break;
              }
            };

            return (
              <Dropdown
                overlay={<Menu items={menuItems} onClick={handleMenuClick} />}
                trigger={['click']}
              >
                <MoreOutlined />
              </Dropdown>
            );
          }
        }
        // 其他列配置...
      ]}
      {...props}
    ></Table>
  );
};

export default List;

两种方案的适用场景 #

• 方法一适合菜单配置需要随行数据变化的场景，每个行的菜单都是独立绑定的，逻辑直观。
• 方法二更适合菜单结构固定，仅点击逻辑依赖行数据的场景，减少重复创建菜单配置对象。

内容的提问来源于stack exchange，提问作者馬料水碼農