如何在反应表格单元格中包含网址

Question

我正在尝试使用 URL 作为表中另一个字段的超链接。

ticketurl和ticketid是我的 JSON 响应中的两个不同的名称值对。我正在尝试显示ticketid，这是指向 的超链接ticketurl：

数据是json数组

[
  {  
    "index": 2,
    "empId": "ammy",
    "requestorId": null,
    "profile": "a",
    "request": "b",
    "ticketId": "abc-12345",
    "createdTime": "2019-07-07 18:01:15.0",
    "updatedTime": "2019-07-07 18:56:26.0",
    "statusurl": "www.xyz.com",
    "ticketurl": "www.abc.com",
    "status": "Open",
    "description": "The issue is open"
  }
]

<ReactTable
  data={data}
  columns={[
    {
      columns: [
        {
          Header: "Employee Id",
          accessor: "empId"
        },
        {
          Header: "Requestor Id",
          accessor: "requestorId"
        },
        {
          Header: "Profile",
          accessor: "profile"
        },
        {
          Header: "Request",
          accessor: "request"
        },
        {
          Header: "Ticket",
          id: "link",
          accessor: d => d.ticketurl,
          Cell: ({ row }) => <a href={row.ticketurl}>{row.ticketid}</a>
        },
        {
          Header: "Created Time",
          accessor: "createdTime"
        },
        {
          Header: "Updated Time",
          accessor: "updatedTime"
        },
        {
          Header: "Status",
          accessor: "status"
        },
        {
          Header: "Description",
          accessor: "description"
        }
      ]
    }
  ]}
  defaultPageSize={10}
  className="-striped -highlight"
/>

我得到一个空单元格。

Answer 1

首先，ReactTable 中的列对象应该直接具有列对象的列表，而不是列列表的列表。它应该看起来像这样：

columns={[
  {
    Header: "Employee Id",
    accessor: "empId"
  },
  {
    Header: "Requestor Id",
    accessor: "requestorId"
  },
  [...]
]}

然后，在您的Cell内容中，row.ticketid不会返回任何值，因为所有值都存储在 中row.original，并且您在 上有拼写错误ticketid，它应该是ticketId（ 上的大写字母I）。

因此，要显示 TicketId 内容，您Cell应该像这样：

Cell: ({ row }) => <a href={row.original.ticketurl}>{row.original.ticketId}</a>