使语义UI的表行可点击

如何解决使语义UI的表行可点击

该表格是Semantic UI中的表格。

使行可点击的一种方法是添加Link from react-router-dom。

就像这里：

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

问题在于它在开发人员工具中返回错误：

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)

试图通过将as={Link}替换为onClick并将其连接到单独的函数来解决此问题。该错误消息现在消失了，但是当单击一行时，它不会重定向到所需的页面。

我在函数内部添加了一个console.log，以检查它是否被调用。

这是代码：

  navigateTo = (entityName,row) => {
    console.log('click: ',row); // the log works
    return (
      <Link to={entityName && `/${entityName}/${idList[rows.indexOf(row)]}`} />
    );
  };

...
            <Table.Body>
              {rows.map((row,rowIndex) => (
                <Table.Row
                  key={idList && idList[rowIndex]}
                  onClick={() => {
                    this.navigateTo(entityName,row);
                  }}
                  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.Row as={Link} />时，控制台会打印这些错误（警告更加准确），因为这样做是将tr元素呈现为a，因此这是这种方法下DOM的样子：

<td> cannot appear as a child of <a>

和

<a> cannot appear as a child of <tbody>

这只是一个警告，不应干扰其余脚本执行，因此重定向仍然可以按照您的指示进行。但是，它会记录警告，并且正如您所描述的，这也会引起样式问题-因为现在tr已转换为a标记。

要挽救此Link实现，可以将这些链接作为td元素的子链接。

<Table.Body>
  {rows.map((row,rowIndex) => (
    <Table.Row
      key={idList && idList[rowIndex]}
    >
      {row.cells.map((cell,cellIndex) => {
        if (cell === undefined) {
          return null;
        }
        return (
          <Table.Cell
            key={idList && `${idList[rowIndex]} ${headers[cellIndex]}`}>
            <Link to={entityName && `/${entityName}/${idList[rows.indexOf(row)]}`}>{cell}</Link>
          </Table.Cell>
        );
      })}
    </Table.Row>
  ))}
</Table.Body>

这将摆脱控制台警告，因为现在a标签现在是td的子元素，而a是有效的HTML结构。请注意，您可能必须对整个行进行一些CSS重构才能使其可单击。您需要展开每个tr标签，以适合td的高度及其父onClick的宽度。

一个更理想的解决方案是像您尝试的那样利用Table.Row的{{1}}道具。但是，在您尝试进行此操作时，实际上并不会重定向用户，因为单击时它只会返回一些JSX-实际上并没有发生任何路由。

要挽救此onClick实现，可以使用withRouter个高阶组件。

import { withRouter } from "react-router-dom";

class GenericTable extends React.PureComponent { ... }

export default withRouter(props => <GenericTable {...props} />);

我们可以使用与您相同的onClick道具，但是我们将在navigateTo方法上重构一些代码

navigateTo = (entityName,idList,rows,row) => {
  console.log('click: ',entityName,row); // the log works
  entityName && this.props.history.push(`/${entityName}/${idList[rows.indexOf(row)]}`);
};

<Table.Row
  key={idList && idList[rowIndex]}
  onClick={() => {
    this.navigateTo(entityName,row);
  }}
  ...

（假设您使用的是客户端路由。如果没有，请使用entityName && window.location.href = "http://linkToRedirectTo.com"）

类似于顶部的答案： [https://codesandbox.io/s/determined-bash-izqsi?file=/src/example.jsx] [1]

使语义UI的表行可点击

如何解决使语义UI的表行可点击

解决方法

相关推荐