Question

我正在使用Material UI在React项目中创建一个表，但出现此错误。我试图使整行成为指向该页面的链接，该页面包含有关该主题的更多信息。这是表格代码片段：

<TableBody>
  {data.map((item, index) => {
    return (
      <TableRow key={index} className={classes.row} component={RouterLink} to={`/subject/${item.Name}`}>
        <TableCell scope="row">{item.Id}</TableCell>
        <TableCell scope="row">{item.Name}</TableCell>
        <TableCell scope="row">{item.Group}</TableCell>
      </TableRow>
    )
  })}
</TableBody>

如果与问题有关，我正在使用Typescript进行编码。 RouterLink是来自react-router-dom的链接，必须重命名它，就像我在组件中进一步从Material UI引用链接一样。

Answer 1

我想让整行成为链接...

您不能那样做。 a不是table或tbody或tr的有效子元素，并且（如错误所示）td并不是{的有效子元素{1}}元素。

您还可以执行其他操作：

您可以在a上使用点击处理程序，并在点击时采取措施（但不能是实际的tr元素）。
您可以在每个a的内容周围使用a元素。
（很常见），您可以有一个包含链接的td。

Answer 2

似乎您忘记附加错误。无论如何，克劳德先生在上方发布的答案对此进行了详细解释。选项i）在tr上放置点击处理程序，并且iii）将tr包裹在a中可以实现。

Answer 3

我不想重申错误消息的内容，而是希望您重新考虑您的设计。将链接移到点击处理程序中是一个重大的可访问性问题。除了将表行作为链接之外，对于用户体验来说也很不直观。表上下文可能已选择并复制。在执行此常见任务时离开页面非常具有破坏性。

您是否考虑过像https://stackoverflow.com/a/58093606/3406963中所建议的那样，添加一个带有正确标记（aria-label）链接图标的附加单元格？

validateDOMNesting（...）：<td>不能作为<a>

3 个答案: