antd中Dropdown组件如何获取到Table 组件当前行某列的数据？

Question

问题描述

在Table组件column中render了一个Dropdown组件，
Dropdown组件下面由若干个按钮组成，
官方给的例子是直接把a标记渲染到行上，这样可以直接拿到数据，
但是我想点击某一行下拉菜单里面的按钮时能够拿到当前行的数据用于其他操作，
我尝试着将Dropdown组件提取出来单独封装了一个Operation组件，可以实现传值的问题，但是有没有更简洁的方法可以不用重新包裹一层？

如下图所示：操作列是个下拉菜单，下面有执行按钮，

当点击某一行的按钮时能拿到Name列的值

示例在这：https://codesandbox.io/s/nr5q...

在示例中，我使用的方法如下：

  columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      render: text => <a href="javascript:;">{text}</a>
    },
    {
      align: "center",
      title: "操作",
      dataIndex: "name",
      key: "operation",
      render: text => {
        // render的时候将text传给Operation组件，此组件下的所有组件都能读取text值了
        return <Operation text={text} handleShowModal={this.showModal} />;
      }

Answer 1

做到这样已经够简洁了吧，因为不管传递参数与否，你都需要将操作那一列的下拉按钮渲染出来，你进行了组件拆分，这很合理，不至于在render函数里写一大堆的东西。至于传值，只是在这个组件上加了一个数据，我认为无可厚非。

Answer 2

{

  align: "center",
  title: "操作",
  dataIndex: "name",
  key: "operation",
  render: text => {
    // render的时候将text传给Operation组件，此组件下的所有组件都能读取text值了
    return <Operation handleShowModal={() => this.showModal(text)} />;
  }

Answer 3

Column的render渲染函数是有三个参数的，第二个值就是当前行的数据

{
  align: "center",
  title: "操作",
  dataIndex: "name",
  key: "operation",
  render: (text,record,index) => {
    return <Operation text={text} handleShowModal={this.showModal(record)} />;
  }
}