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

Posted 2023-02-21

【中文标题】React-router：使用 <Link> 作为可点击的数据表行

【英文标题】：React-router: Using <Link> as clickable data table row

【发布时间】：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>

【参考方案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>
                            ))

【讨论】：

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