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

Question

我刚开始使用 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。

原文由 jfrye 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Sergio Flores 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

原文由 Igor Barbashin 发布，翻译遵循 CC BY-SA 4.0 许可协议