如何使用带有来自 antd 表列的 id 的 React Router <Link>

Question

在我的项目中，我有一个 antd 表。在那个表中，我列出了运动员。当我点击运动员的名字时，我应该被导航到运动员资料页面。

运动员资料路线 /athletes/{id}

但是对于这张桌子，我无法获得任何价值id。

这是我的数据源

[
   {
      email: "x@x.com",
      firstName: "X",
      id: 402,
      lastName: "X"
   },
   {
      email: "y@y.com",
      firstName: "Y",
      id: 403,
      lastName: "Y"
   },
   {
      email: "z@z.com",
      firstName: "Z",
      id: 404,
      lastName: "Z"
   }
]

以下是列对象的代码

const columns = [
      {
        title: "First Name",
        dataIndex: "firstName",
        className: "col-first-name",
        render: (text) => (
          <Link to={"/athletes/" + ???}>{text}</Link>
        ),
      },
      {
        title: "Last Name",
        dataIndex: "lastName",
        className: "col-last-name"
      },
      {
        title: "Email",
        dataIndex: "email",
        className: "col-email",
      }
    ];

（id在上面的代码中，我在应该在的地方添加了“???” ）有没有办法将id属性添加到？谁能帮我这个？

react-router 版本 - “^5.1.2” antd 版本 - ^3.25.3

Answer 1

您需要传递另一个parameter 内部渲染，record它包含有关该特定行的所有数据。像这样的东西：

const columns = [
      {
        title: "First Name",
        dataIndex: "firstName",
        className: "col-first-name",
        render: (text,record) => (
          <Link to={"/athletes/" + record.id}>{text}</Link>
        ),
      },
      {
        title: "Last Name",
        dataIndex: "lastName",
        className: "col-last-name"
      },
      {
        title: "Email",
        dataIndex: "email",
        className: "col-email",
      }
    ];

我创建了这个演示以供参考：https : //stackblitz.com/edit/react-ym57ax?file=index.js