如何将来自反应路由器 dom 的链接放在 Material UI 表中

Posted 2023-02-21

【中文标题】如何将来自反应路由器 dom 的链接放在 Material UI 表中

【英文标题】：How to put Link from react router dom inside Material UI table

【发布时间】：2021-11-27 10:39:12

【问题描述】：

正如标题所说，我需要从 Material UI 将 Link 放入表中，但我收到这两个错误 <td> cannot appear as a child of <a> <a> cannot appear as a child of <tr>。现在显然我知道这两条错误消息的含义，但是我需要将 Link 放在单元格周围，比如容器，因为我需要能够单击行内的任意位置以重定向到另一个页面。

这是我的代码：

 <TableRow key=index>
            <Link
              to=`/edit/$apiData.id/$apiData.name/$apiData.email`
            >
            <TableCell align="left" style= paddingLeft: 40 >
              apiData.name
            </TableCell>
            <TableCell align="left">apiData.email</TableCell>
            <TableCell align="left">apiData.status</TableCell>
            <TableCell align="left">roles</TableCell>
            </Link>
            <TableCell align="right" style= paddingRight: 40 >
              <RoleButton onClick=handleRoleChange>
                roles === "Admin" ? "Set as User" : "Set as Admin"
              </RoleButton>
            </TableCell>
          </TableRow>

任何人都知道如何解决这个问题，如果你这样做，我将不胜感激

【问题讨论】：

不要用<a>标签包裹td或tr，您可以使用onClick触发事件并通过函数重定向用户

【参考方案1】：

您可以在TableRow 中使用onClick。

function HomeButton() 
  let history = useHistory();

  function onRowClick(name) 
    history.push(`/user/$name`);
  

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>Name</TableCell>
          <TableCell>Age</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow onClick=() => onRowClick('tom')>
          <TableCell>Tom</TableCell>
          <TableCell>26</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );