使用链接使表格行可点击

Question

现在只有一个包含图标的表格单元格是可点击的，就像最后一样：

<Table.Body>
  {rows.map((row, rowIndex) => (
    <Table.Row key={idList && idList[rowIndex]}>
      {emptyFirstHeader && (
        <Table.Cell>
          <Image
            src={row.cells[0]}
          />
        </Table.Cell>
      )}
      {
        (emptyFirstHeader ? row.cells.shift() : row,
        row.cells.map((cell, cellIndex) => {
          if (cell === undefined) {
            return null;
          }
          return (
            <Table.Cell key={idList}>
              {cell}
            </Table.Cell>
          );
        }))
      }

      <Table.Cell>
        <Link //here is the link done - inside a table cell
            to={
              entityName &&
              `/${entityName}/${idList[rows.indexOf(row)]}`
            }>
            <Icon name="ellipsis horizontal" />
          </Link>
      </Table.Cell>
    </Table.Row>
  ))}
</Table.Body>

我的目标是使整行可点击（并重定向到该新链接）。 所以我试图使该行可点击：

<Table.Body>
  {rows.map((row, rowIndex) => (
    <Table.Row key={idList && idList[rowIndex]}>
      {emptyFirstHeader && (
        <Table.Cell>
          <Image
            src={row.cells[0]}
          />
        </Table.Cell>
      )}
      {
        (emptyFirstHeader ? row.cells.shift() : row,
        row.cells.map((cell, cellIndex) => {
          if (cell === undefined) {
            return null;
          }
          return (
            <Table.Cell key={idList}>
              {cell}
            </Table.Cell>
          );
        }))
      }

      <Table.Cell>       
        <Icon name="ellipsis horizontal" />
      </Table.Cell>
         // moved it outside the Tabel.Cell and now it is inside Table.Row
         <Link to={entityName && `/${entityName}/${idList[rows.indexOf(row)]}`}>
         </Link>
    </Table.Row>
  ))}
</Table.Body>

但不幸的是，它不起作用。 有没有办法改变它并使整行可点击？

Answer 1

将<Table.Row>元素放在<Link>元素中。 这样做将“围绕<Table.Row>包装<Link>行为”。

我相信这段代码会解决你的问题：

<Table.Body>
  {rows.map((row, rowIndex) => (
    <Link to={entityName && `/${entityName}/${idList[rows.indexOf(row)]}`}>    
      <Table.Row key={idList && idList[rowIndex]}>
        {emptyFirstHeader && (
            <Table.Cell>
                <Image src={row.cells[0]} />
            </Table.Cell>
        )}
        {
          (emptyFirstHeader ? row.cells.shift() : row, row.cells.map((cell, cellIndex) => {
            if (cell === undefined) {
              return null;
            }
            return (
              <Table.Cell key={idList}>
                {cell}
              </Table.Cell>
            );
          }))
        }
        <Table.Cell>       
          <Icon name="ellipsis horizontal" />
        </Table.Cell>         
      </Table.Row>
    </Link>
  ))}
</Table.Body>