3

我正在尝试使用 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"
/>

我得到一个空单元格。

4

2 回答 2

3

首先,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>
于 2019-07-08T08:07:12.083 回答
0
 {
    Header: "Header1",
    Cell: ({ row }) => (
       
          <Link
            color="inherit"
            to={`/gestion-documentos/estudiante/${row.original.cedula}`}
          >
            <AiOutlineFileDone size={25} />
          </Link>
       
    ),
  },
于 2021-12-09T17:10:11.883 回答