在 React 中使用链接组件时如何摆脱样式

Question

我的应用程序中有一个表，当用户单击该表的一行时，他们会被重定向到应用程序的另一个页面。当我将链接组件应用于表格的每一行时，该行的样式就会变得混乱。

这就是它的实际外观（当我不将链接组件应用于表格的每一行时，它实际上看起来像这样）：

当我将链接组件应用于表格的每一行时，它的外观如下：

下面是我用来渲染表格的代码：

  /*
  * Method for rendering the table
  * @param {Array} TableData - Table containing the list of products
  */
  renderTable = TableData => {
    return TableData.map((item, i) => (
      <tr key={i}>
        <Link to="/productServices/:productID">
        <td>1.</td>
        <td>{item.productName}</td>
        <td>{item.description}</td>
        <td>{item.department}</td>
        </Link>
      </tr>
    ));
  };

任何帮助将不胜感激。谢谢！

Answer 1

问题是您在 tr 标记中输入了无效的 HTML，它破坏了整个布局。

您应该只使用td 和th 来控制表格行的大小和流（tr）。您可以在 Table 行上使用 onClick 处理程序，但 这对可访问性不利，您将强制控制应用程序的导航。

下面是onClick 的样子：

  const handleNavigation = () => {
    // run react-router code for imperative navigation  
  }

  /*
  * Method for rendering the table
  * @param {Array} TableData - Table containing the list of products
  */
  renderTable = TableData => {
    return TableData.map((item, i) => (
      <tr key={i} onClick={handleNavigation}> 
        <td>1.</Link></td>
        <td>{item.productName}</td>
        <td>{item.description}</td>
        <td>{item.department}</td>
      </tr>
    ));
  };

我的建议是在每个`td 中传递一个Link。它不会破坏样式，但也可以让用户点击表格行的任何位置并进行适当的导航：

  /*
  * Method for rendering the table
  * @param {Array} TableData - Table containing the list of products
  */
  renderTable = TableData => {
    return TableData.map((item, i) => (
      <tr key={i}> 
        <td><Link to="/productServices/:productID">1.</Link></td>
        <td><Link to="/productServices/:productID">{item.productName}</Link></td>
        <td><Link to="/productServices/:productID">{item.description}</Link></td>
        <td><Link to="/productServices/:productID">{item.department}</Link></td>
      </tr>
    ));
  };

Here is a very simple example of the code above, on a simplified table. With the styling to make the link 100%.

您可以将其进一步扩展为一个组件，您将使用该组件将表格单元格的内容包装在链接中并在您的表格中重复使用。