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

问题描述

在创建表时使用了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可以再次正常运行，但是行不再可单击。

关于如何消除该错误的任何建议？

解决方法

您需要在行中添加onclick函数以进行导航。像这样的东西。

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

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