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

Answer 1

onClick有效，但有时您需要实际的 <a>由于各种原因标记:

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

以下是接受 to 的 Td 组件示例 Prop :

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 prop 多次，但同时您可以更好地控制可点击区域，并且表格中可能有其他交互元素，例如复选框。