如何在 React table 单元格中包含 url

Question

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

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 不会 return 任何值，因为所有值都存储在 row.original 中，并且您有ticketid 上的错字，应该是 ticketId（I 上的大写字母）。

因此，要显示 ticketId 内容，您的 Cell 应该是这样的：

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

Answer 2

 {
    Header: "Header1",
    Cell: ({ row }) => (
       
          <Link
            color="inherit"
            to={`/gestion-documentos/estudiante/${row.original.cedula}`}
          >
            <AiOutlineFileDone size={25} />
          </Link>
       
    ),
  },

如何在 React table 单元格中包含 url

How to include url in react table cell

json

reactjs

react-table

react-table-v6