语义 UI 表中的可点击行返回错误答案

【问题标题】：Clickable rows in Semantic UI table returns errors语义 UI 表中的可点击行返回错误
【发布时间】：2020-08-23 15:29:58
【问题描述】：

在创建表时使用了Semantic UI's Table。它看起来不错，但我希望所有行都可点击，并且当它们被点击以重定向到链接中的页面时，我添加了Link from react-router-dom。

这些行现在确实是可点击的，但在控制台中我收到了一些错误消息：

index.js:1 Warning: validateDOMNesting(...): <td> cannot appear as a child of <a>.
in td (created by TableCell)
in TableCell (at GenericTable.js:193)
in a (created by LinkAnchor)
in LinkAnchor (created by Context.Consumer)
in Link (created by TableRow)
in TableRow (at GenericTable.js:143)
in tbody (created by TableBody)
in TableBody (at GenericTable.js:141)
in table (created by Table)
in Table (at GenericTable.js:105)

这是代码：

import React from 'react';
import { Table } from 'semantic-ui-react';
import { Link } from 'react-router-dom'; // used for Link

export default class GenericTable extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    const {
      headers,
      emptyFirstHeader,
      rows,
      id,
      entityName,
      idList,
    } = this.props;

    return (
      <Table id={id}>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell />
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {rows.map((row, rowIndex) => (
            <Table.Row
              key={idList && idList[rowIndex]}
              as={Link} // this line makes the row clickable but also adds the errors
              to={entityName && `/${entityName}/${idList[rows.indexOf(row)]}`}> // the location of the redirect
              {row.cells.map((cell, cellIndex) => {
                if (cell === undefined) {
                  return null;
                }
                return (
                  <Table.Cell
                    key={idList && `${idList[rowIndex]} ${headers[cellIndex]}`}>
                    {cell}
                  </Table.Cell>
                );
              })}
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    );
  }
}

我注意到它还会影响一些在出现此错误时未考虑的 css 类。如果注释了 as={Link} 行，css 将再次正常工作，但行不再可点击。

关于如何摆脱该错误的任何建议？

【问题讨论】：

对于上下文，HTML 有关于哪些标签可以是其他标签的子标签的规则。在这种情况下，tr 将被替换为 Link 作为锚标记。
@Cehhiro 我明白了，有没有办法解决它？

标签： javascript reactjs semantic-ui react-router-dom semantic-ui-react

【解决方案1】：

您需要在行中添加一个 onclick 函数来进行导航。像这样的。

constructor(props) {
  super(props);
}
  
navigateTo(path) {
  // navigate to path
}

...
<Table.Row onClick={()=>{this.navigateTo(`where to to`)}}>

【讨论】：