如何禁用 Link/href 所做的 css 更改

Question

目前有一个包含一些列的表，如下所示： 如果想查看某公司的详细信息，必须点击该行右端的箭头。

当我想让整行可点击时出现问题，即使没有添加任何 css 类，它也会破坏页面的设计。

这是只有右端箭头可点击时的代码：

import React from 'react';
import { Table, Image, Icon } from 'semantic-ui-react';
import { Link } from 'react-router-dom';

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

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

    return (
      <Table>
        <Table.Header>
          <Table.Row>
            {emptyFirstHeader && <Table.HeaderCell />}
            {headers.map(header => (
              <Table.HeaderCell key={headers.indexOf(header)}>
                {header}
              </Table.HeaderCell>
            ))}
            <Table.HeaderCell textAlign="right" />
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {rows.map((row, rowIndex) => (
            <Table.Row key={idList && idList[rowIndex]}>
              {emptyFirstHeader && (
                <Table.Cell>
                  <Image src={row.cells[0]} />
                </Table.Cell>
              )}

              {
                (emptyFirstHeader ? row.cells.shift() : row,
                row.cells.map((cell, cellIndex) => {
                  if (cell === undefined) {
                    return null;
                  }
                  return (
                    <Table.Cell
                      key={
                        idList && `${idList[rowIndex]} ${headers[cellIndex]}`
                      }>
                      {cell}
                    </Table.Cell>
                  );
                }))
              }

              <Table.Cell>
                <Link
                  to={
                    entityName && `/${entityName}/${idList[rows.indexOf(row)]}`
                  }>
                  <Icon name="chevron right" />
                </Link>
              </Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    );
  }
}

当我将每个 <Table.Row> 包含在 <Link> 中时，它使该行可点击，但它破坏了设计：

import React from 'react';
import { Table, Image, Icon } from 'semantic-ui-react';
import { Link } from 'react-router-dom';

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

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

    return (
      <Table>
        <Table.Header>
          <Table.Row>
            {emptyFirstHeader && <Table.HeaderCell />}
            {headers.map(header => (
              <Table.HeaderCell key={headers.indexOf(header)}>
                {header}
              </Table.HeaderCell>
            ))}
            <Table.HeaderCell textAlign="right" />
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {rows.map((row, rowIndex) => (
             <Link // ADDED HERE 
                to={
                  entityName && `/${entityName}/${idList[rows.indexOf(row)]}`
                }>
            <Table.Row key={idList && idList[rowIndex]}>
              {emptyFirstHeader && (
                <Table.Cell>
                  <Image src={row.cells[0]} />
                </Table.Cell>
              )}

              {
                (emptyFirstHeader ? row.cells.shift() : row,
                row.cells.map((cell, cellIndex) => {
                  if (cell === undefined) {
                    return null;
                  }
                  return (
                    <Table.Cell
                      key={
                        idList && `${idList[rowIndex]} ${headers[cellIndex]}`
                      }>
                      {cell}
                    </Table.Cell>
                  );
                }))
              }

              <Table.Cell>
                <Link
                  to={
                    entityName && `/${entityName}/${idList[rows.indexOf(row)]}`
                  }>
                  <Icon name="chevron right" />
                </Link>
              </Table.Cell>
            </Table.Row>
         </Link> // CLOSED HERE
          ))}
        </Table.Body>
      </Table>
    );
  }
}

如何做到不影响设计？

Answer 1

如果您确实需要语义 HTML，您可以编辑 Table.Row 以使用 Link 作为其组件，就像这样。然后给 Row 一个类或样式display: table-row

<Table.Row as={Link} style={{display: "table-row"}} to={"/"}>content of the Row</Table.Row>

您可以用as 属性替换默认元素，库会将任何其他属性传递给新组件，因此如果您传递to，它会将链接传递给链接组件。