React TypeScript：如何在Ant Design Table下拉列中向函数传递Record与菜单key参数

我来帮你搞定这个问题——要让updateUser同时拿到行数据record和菜单项的key，核心就是让菜单的点击回调能访问到当前行的record，这里有两种实用的方案：

方案一：将Menu定义移到Action列的render函数内部 #

因为render函数每次渲染都会拿到当前行的record，把Menu放在这里面，就能直接在点击回调里把record和key一起传给updateUser。修改后的代码如下：

首先更新Action列的配置：

{ 
  title: "Action", 
  render: (record: ToDoClass) => {
    // 把menu移到render内部，直接访问当前行的record
    const menu = ( 
      <Menu onClick={(e) => updateUser(record, e.key)}> 
        <Menu.Item key="0" /> 
        <Menu.Item key="1">User 1</Menu.Item> 
        <Menu.Item key="2">User 2</Menu.Item> 
      </Menu> 
    );

    return ( 
      <Dropdown overlay={menu}> 
        <Button> User <DownOutlined /> </Button> 
      </Dropdown> 
    ) 
  }
}

然后修改updateUser函数，让它接收两个参数：

const updateUser = (record: ToDoClass, key: React.Key): void => {
  console.log("当前行数据：", record);
  console.log("菜单项key：", key);
};

这种方案最直观，不需要额外的封装，每个行的菜单都是独立创建的，能直接拿到当前行的record。

方案二：用函数封装Menu（适合菜单逻辑复用的场景） #

如果你的菜单结构比较复杂，需要在多个地方复用，不想每次都在render里重新定义，可以用一个函数来返回Menu，通过闭包把record传递进去：

首先定义一个生成Menu的函数：

const getMenu = (record: ToDoClass) => ( 
  <Menu onClick={(e) => updateUser(record, e.key)}> 
    <Menu.Item key="0" /> 
    <Menu.Item key="1">User 1</Menu.Item> 
    <Menu.Item key="2">User 2</Menu.Item> 
  </Menu> 
);

然后在Action列的render里调用这个函数，传入当前的record：

{ 
  title: "Action", 
  render: (record: ToDoClass) => {
    return ( 
      <Dropdown overlay={getMenu(record)}> 
        <Button> User <DownOutlined /> </Button> 
      </Dropdown> 
    ) 
  }
}

updateUser函数的修改和方案一一致：

const updateUser = (record: ToDoClass, key: React.Key): void => {
  console.log("当前行数据：", record);
  console.log("菜单项key：", key);
};

这种方案的优势是可以复用菜单的逻辑，当菜单需要修改时，只需要改动getMenu函数即可，维护起来更高效。

注意：尽量避免在render里使用bind或者箭头函数直接绑定参数（比如onClick={updateUser.bind(null, record)}），虽然也能实现功能，但每次render都会创建新的函数，可能触发不必要的组件重渲染，影响性能。

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