React-router：使用 <Link> 作为可点击数据 table 行

Question

我刚开始使用 ReactJS 和 react-router。我想要一个可点击的 table 行和类似以下设置的内容：

<Link to=“#”>
<tr>
    <td>{this.props.whatever1}</td>
    <td>{this.props.whatever2}</td>
    <td>{this.props.whatever3}</td>
</tr>
</Link>

但我知道您不能将 <a> 标签放在 <tbody> 和 <tr> 标签之间。我还能怎么做？

PS：如果可能，我不想使用 jQuery。

Answer 1

为什么不直接使用 onClick？

var ReactTable = React.createClass({
  handleClick: function(e) {
    this.router.transitionTo('index');
  },
  render: function() {
    return(
      <div>
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Full Detail</th>
            </tr>
          </thead>
            <tbody>
              <tr onClick={this.handleClick.bind(this)}>
                <td>{user.name}</td>
                <td>{user.age}</td>
                <td>{details}</td>
              </tr>
            </tbody>
        </table>
      </div>
    );
  }
});

Answer 2

onClick 有效，但有时您出于各种原因需要实际的 <a> 标签：

辅助功能
渐进增强（如果脚本抛出错误，links 仍然有效）
能够在新标签页中打开 link
能够复制 link

这是一个接受 to prop 的 Td 组件示例：

import React from 'react';
import { Link } from 'react-router-dom';

export default function Td({ children, to }) {
  // Conditionally wrapping content into a link
  const ContentTag = to ? Link : 'div';

  return (
    <td>
      <ContentTag to={to}>{children}</ContentTag>
    </td>
  );
}

然后像这样使用组件：

const users = this.props.users.map((user) =>
      <tr key={user.id}>
        <Td to={`/users/${user.id}/edit`}>{user.name}</Td>
        <Td to={`/users/${user.id}/edit`}>{user.email}</Td>
        <Td to={`/users/${user.id}/edit`}>{user.username}</Td>
      </tr>
    );

是的，你必须多次传递 to 道具，但同时你可以更好地控制可点击区域，并且你可能在 table 中有其他交互元素，例如复选框。

Answer 3

{shipment.assets.map((i, index) => (
                              <tr
                                style={{ cursor: "pointer" }}
                                onClick={(e) => e.preventDefault()}
                              >
                                <td>{index + 1}</td>
                                <td>{i._id}</td>
                                <td>{i.status}</td>
                                <td></td>
                              </tr>
                            ))}

Answer 4

此答案基于@Igor Barbasin 的建议。这会将 link 添加到整行而不仅仅是内容，我们也不需要用 'Link'.

包装所有单独的 'td' 元素

.table-row {
  display: table-row
}

export default function Table() {
  return (
    <table>
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            {/* treats the link element as a table row element */}
            <Link className="table-row">
                <td>Noname</td>
            </Link>
        </tbody>
    </table>
  )
}

Answer 5

你可以使用useHistory()钩子：

声明：

const history = useHistory();

并将其与 <tr> 或 <td> 标签一起使用：

<tr onClick={() => history.push("/yoururl")}>
    <td>{this.props.whatever1}</td>
    <td>{this.props.whatever2}</td>
    <td>{this.props.whatever3}</td>
</tr>

React-router：使用 <Link> 作为可点击数据 table 行

React-router: Using <Link> as clickable data table row

javascript

reactjs

react-router