json - 如何在反应表格单元格中包含 url

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 对象应该直接有一个 column objects 的列表，而不是 columns 列表的列表。它应该是这样的：

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>

Answer 2

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