Go 在表格内单击时指向链接。带有 onClick 的行

Question

我有一个表，我希望每一行都是可点击的，当你点击它到 go 到那个链接（每行不同）。

<Table.Body>
  {rows.map((row, rowIndex) => (
    <Table.Row
      key={idList && idList[rowIndex]}
      onClick={() => {
        <Link
          to={
            entityName && `/${entityName}/${idList[rows.indexOf(row)]}`
          }
        />;
      }}>
      ...
    </Table.Row>
  ))}
</Table.Body>

所以我像上面那样做了，添加了一个组件但不起作用。 它说：

预期分配或 function 调用，而是看到一个表达式 no-unused-expressions

我正在使用Semantic UI中的Table / Table.Row和react-router-dom中的Link 。 我无法更改Table ，但Link组件不是强制性的。 无论如何，如果它可以在单击时重定向到该链接，那就太好了。

有什么办法吗？

Answer 1

一种方法是使用历史从组件导航。 要获取历史 object，您需要使用可从react-router:5.1.0获得的useHistory()挂钩，或者如果您使用的是旧版本的 react-router

1. 你将不得不添加一个方法来做到这一点：

功能性

const onNavigate = (entityName, idList) => () => {
  entityName && history.push( && `/${entityName}/${idList[rows.indexOf(row)]}`) // change accordingly 
}

Class

onNavigate = (entityName, idList) {
  return function () {
    return entityName && this.props.history.push( && `/${entityName}/${idList[rows.indexOf(row)]}`) // change accordingly 
  }
}

此方法返回 function 引用，因此onCLick道具不会在渲染时触发它，并且some_props将在内部function中可见

2. 您将方法传递给onClick方法：

<Table.Body>
  {rows.map((row, rowIndex) => (
    <Table.Row
      key={idList && idList[rowIndex]}
      onClick={onNavigate(enitityName, idList)}
    >
      ...
    </Table.Row>
  ))}
</Table.Body>

这样，点击处理程序将收到 function 引用，并应导航到相应的 url

Answer 2

使用react-router链接到 react 应用程序内部，您可以使用useHistory挂钩并推送新路径。

import { useHistory } from "react-router-dom";

function Component() {
  let history = useHistory();

  return (
    <Table.Body>
      {rows.map((row, rowIndex) => (
        <Table.Row
          key={idList && idList[rowIndex]}
          onClick={() =>
            history.push(
              entityName && `/${entityName}/${idList[rows.indexOf(row)]}`
            )
          }
        >
          ...
        </Table.Row>
      ))}
    </Table.Body>
  );
}