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

Posted 2023-02-22

【中文标题】如何禁用 Link/href 所做的 css 更改

【英文标题】：How to disable the css changes made by Link/href

【发布时间】：2020-11-21 08:04:32

【问题描述】：

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

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

如何做到不影响设计？

【参考方案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，它会将链接传递给链接组件。

【讨论】：

如您所见，Table 是从semantic-ui-react 导入的。所以Table.Row 是其中的一部分。在这种情况下可以这样添加吗？

我完全理解这一点，并且该库中的 Row 接受 prop as 可用于将默认的 tr 元素替换为您喜欢的任何内容，只需尝试我发送的 sn-p。

我添加了，它使行可点击，但我不知道是否可以在那里添加正确的链接。如果在您的回答中允许as=Link，则该链接是实际页面的链接，因此我尝试将其添加为：as=Link to= entityName && /$entityName/$idList[rows.indexOf(row) ] 似乎不正确，因为它有错误

不要将链接放入as，然后添加另一个道具to（将更新答案）