时间戳

首页 > 解决方案 > 如何禁用 Link/href 所做的 css 更改

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

问题描述

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

当我想让整行可点击时会出现问题，即使没有添加任何 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>在 a<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>
    );
  }
}

如何在不影响设计的情况下做到这一点？

标签： javascripthtmlcssreactjsreact-router-dom

解决方案

如果您确实需要语义 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它将链接传递给 Link 组件。

推荐阅读