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

Question

For creating a table it was used Semantic UI's Table . It looks fine but I want to have all the rows clickable and when they are clicked to redirect to the page in the link, so I added Link from react-router-dom .

The rows are indeed clickable now but in console I get some error messages:

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)

This is the code:

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>
    );
  }
}

I noticed that it also affects some css classes which are not taken into account when this error appears. If the line as={Link} is commented, the css works fine again but the rows aren't clickable anymore.

Any suggestions about how to get rid of that error?

Answer 1

You need to add an onclick function to the row to do your navigation. Something like this.

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

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