使 Semantic UI Table 的行可点击

Question

该表是来自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, idList, rows, row) => {
    console.log('click: ', entityName, 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, idList, rows, 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>

任何想法为什么不起作用以及应该如何修改？

Answer 1

在您使用<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 的子标签，这是有效的 HTML 结构。请注意，您可能需要对整行进行一些 CSS 重构才能使其可点击。您需要扩展每个a 标签以适应tr 的高度和其父td 的宽度。

---

对此更理想的解决方案是像您尝试的那样利用Table.Row 的onClick 属性。但是，在您的尝试中，这并没有真正重定向用户，因为它只是在单击时返回一些 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, idList, rows, row);
  }}
  ...

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

Answer 2

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