React-router：使用 <Link> 作为可点击的数据表行答案

【问题标题】：React-router: Using <Link> as clickable data table rowReact-router：使用 <Link> 作为可点击的数据表行
【发布时间】：2016-06-04 13:12:49
【问题描述】：

我是使用 ReactJS 和 react-router 的新手。我想要一个可点击的表格行和类似以下设置：

<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。

【问题讨论】：

“可点击”非常广泛。您想添加到另一个页面的超链接，还是想在单击时运行一些 Javascript 代码？如果是前者，只需在它所属的<td> 内添加一个<a>。如果是后者，您可以像这样添加一个 onClick 侦听器<tr onClick={this.handleClick}>

标签： javascript reactjs react-router

【解决方案1】：

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

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

这是一个接受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 属性，但同时您可以更好地控制可点击区域，并且表格中可能还有其他交互元素，例如复选框。

【讨论】：

但您最终会得到无效的 html（div 作为 tr 的子级）
刚刚检查过。 td 中的 div 是合法的：dropbox.com/s/l24ioflyjjxjuq6/…
啊，我看错了。我认为代码最终会在 tr 中包含 div
@DragonKnight 您可能可以使用Link 并使用display: table-row 对其进行样式设置。不过我没试过
只有内容（例如文本）会被链接，而不是行

【解决方案2】：

为什么不直接使用 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>
    );
  }
});

【讨论】：

那你就不能使用右键选项了，比如在新标签页中打开。这可能对表格很有用。
很少有应用程序适当地使用上下文菜单，并且几乎不可能在移动设备中很好地使用。如果您尝试在 react-app 中使用右键单击，则应该重新考虑您的 UX
上述要点与上下文菜单无关......这是“在新选项卡/窗口中打开”的常见模式 - 无论您是右键单击，cmd/ctrl-click，长按什么的。
@EricHodonsky onClick 处理程序阻止 + 在新选项卡中打开链接。它不一定与上下文菜单有关。当然我可以在 onClick 函数中检测到event.ctrlKey 并使用window.open，但我希望有一种本机方式来实现这一点。也许可点击行链接的整个概念无论如何都是无效的，也许我们应该将链接应用于每个表格列。有点重复，但可能更准确。
它禁止高级用户和禁用用户

【解决方案3】：

此答案基于@Igor Barbasin 的建议。这会将链接添加到整行，而不仅仅是内容，我们也不需要用 '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>
  )
}

【讨论】：

【解决方案4】：

{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>
                            ))}

【讨论】：

请在您的代码中添加更多详细信息。这对第一次查看您的答案的其他人没有多大帮助