Javascript 在React中使用链接组件时如何消除样式

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

下面是它的实际外观（当我不将链接组件应用于表的每一行时，它实际上是这样的）：

  /*
  * 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>
    ));
  };

下面是将链接组件应用于表的每一行时的外观：

  /*
  * 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>
    ));
  };

下面是我用来呈现表格的代码：

  /*
  * 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>
    ));
  };

/*
*用于呈现表的方法
*@param{Array}TableData-包含产品列表的表
*/
renderTable=TableData=>{
return TableData.map（（项目，i）=>(
1.
{item.productName}
{item.description}
{项目.部门}
));
};

---

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

问题是，您在

tr

标记中输入了无效的HTML，它破坏了整个布局

您只能使用

td

和

th

来控制表行的大小和流量（

tr

）。您可以在表行上使用

onClick

处理程序，但是这对可访问性不好，而且您必须控制应用程序上的导航

下面是单击

onClick

时的外观：

const handleNavigation=（）=>{
//运行react路由器代码进行命令式导航
}
/*
*用于呈现表的方法
*@param{Array}TableData-包含产品列表的表
*/
renderTable=TableData=>{
return TableData.map（（项目，i）=>(
1.
{item.productName}
{item.description}
{项目.部门}
));
};

我的建议是在每个“td”内传递一个

链接。它不会破坏样式，但也会让用户能够单击表行的任何位置并导航到适当的位置：

/*
*用于呈现表的方法
*@param{Array}TableData-包含产品列表的表
*/
renderTable=TableData=>{
return TableData.map（（项目，i）=>(
1.
{item.productName}
{item.description}
{项目.部门}
));
};


您可以进一步扩展它，使其成为一个组件，用于将表格单元格的内容包装在链接中，并在表格中重复使用。
问题在于，您在
tr
标记中输入了无效的HTML，它破坏了整个布局

您只能使用
td
和
th
来控制表行的大小和流量（
tr
）。您可以在表行上使用
onClick
处理程序，但是这对可访问性不好，而且您必须控制应用程序上的导航

下面是单击
onClick
时的外观：

const handleNavigation=（）=>{
//运行react路由器代码进行命令式导航
}
/*
*用于呈现表的方法
*@param{Array}TableData-包含产品列表的表
*/
renderTable=TableData=>{
return TableData.map（（项目，i）=>(
1.
{item.productName}
{item.description}
{项目.部门}
));
};

我的建议是在每个“td”内传递一个
链接。它不会破坏样式，但也会让用户能够单击表行的任何位置并导航到适当的位置：

/*
*用于呈现表的方法
*@param{Array}TableData-包含产品列表的表
*/
renderTable=TableData=>{
return TableData.map（（项目，i）=>(
1.
{item.productName}
{item.description}
{项目.部门}
));
};


您可以进一步扩展它，使其成为一个组件，用于将表格单元格的内容包装在链接中，并在表格中重复使用。
首先感谢您的解释，我应用了这个技巧，它是有效的，但这个技巧的折衷是，只有当用户单击行中给出的文本信息时，才会重定向用户（就像超链接一样）我想要的是，用户只需单击行本身就可以重定向。关于我如何实现该功能，有什么想法吗？谢谢！@AnmolSarraf我添加了一个示例链接，该链接是
内部
td
的一个简单实现，带有样式。你可以看到，只要稍微更改CSS，链接就会占用整个单元格，并且e行是可点击的。非常感谢@Inacio Schweller。您给出的示例完全符合我的需要。：-）首先，感谢您的解释，我应用了这个技巧，它是有效的，但这个技巧的折衷是，用户只有在单击行中给出的文本信息（就像超链接）时才会重定向我想要的是，只需单击行本身，就可以重定向用户。关于如何实现该功能的任何想法。谢谢@AnmolSarraf I在
td
中添加了一个带有样式的
简单实现的示例链接。你可以看到，通过一个小小的CSS更改，链接占据了整个单元格，行是可点击的。非常感谢@Inacio Schweller。你给出的例子完全符合我的需要。：-）