如何为每个 Material-UI TableRow 添加 <Link> react-router？

Posted 2023-02-21

【中文标题】如何为每个 Material-UI TableRow 添加 <Link> react-router？

【英文标题】：How to add <Link> react-router per each Material-UI TableRow?

【发布时间】：2018-11-14 09:45:58

【问题描述】：

如何在 .map 中为每个 TableRow 添加链接？

*我的错误是 validateDOMNesting(...): cannot appear as a child of "" 我正在使用反应路由器 react-router-dom

如何在Table TableRow的.map的每个循环中添加链接？

   import React,  Fragment  from 'react'
import  Paper  from 'material-ui'
import Table from 'material-ui/Table';
import TableBody from 'material-ui/Table/TableBody';
import TableCell from 'material-ui/Table/TableCell';
import TableHead from 'material-ui/Table/TableHead';
import TableRow from 'material-ui/Table/TableRow';
import  connect  from 'react-redux'
// import  Edit, Delete  from '@material-ui/icons'
import  withStyles  from 'material-ui/styles'
import  BrowserRouter as Router, Route, Link  from "react-router-dom";
const drawerWidth = 100;
class Listofbond extends React.Component 
    render() 
        console.log(this.props);
        const  MainProps, classes  = this.props;
        return (
            <Router>
                <Paper>
                    <Table >
                        <TableHead>
                            <TableRow>
                                <TableCell>Bondame</TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            [1, 2, 3].map(n => 
                                return (
                                    <Link to=`/bond/$n/` key=n>
                                        <TableRow>
                                            <TableCell component="th" scope="row">
                                                n
                                            </TableCell>
                                        </TableRow>
                                    </Link>
                                );
                            )
                        </TableBody>
                    </Table>
                </Paper>
            </Router>
        )
    



export default Listofbond;

【问题讨论】：

在您的链接上添加父级并尝试一下。例如： /bond/$n/ key=n> n

仍然出错 *我的错误是 validateDOMNesting(...): cannot appear as a child of ""

@YamoshiWolverine 你找到解决办法了吗？

【参考方案1】：

链接应用于定义了 onClick 的组件，因此将您的 TableRow 包装到这样的 div 中：

<Link to=`/bond/$n/` key=n>
   <div>
     <TableRow>
       <TableCell component="th" scope="row">
         n
       </TableCell>
      </TableRow>
   </div>
</Link>

【讨论】：

仍然出错 *my error is validateDOMNesting(...): cannot appear as a child of ""

我正在使用相同的并且它正在工作，但在我的情况下，不需要使用路由器标签。如果您需要更多帮助，请告诉我。

【参考方案2】：

正确的做法是使用TableRow组件的component prop：

<TableRow component=Link to=`/bond/$n/` key=n>
...
</TableRow>

【讨论】：

您也可以将父组件包装在withRouter 中，然后在调用history.push('/path/to/wahtever') 的TableRow 上放置onClick 处理程序

这不会提供“a”元素的功能，例如右键单击 -> 打开新窗口，查看浏览器底部的路径等。

我已经尝试过这个解决方案，但它给了我一个验证错误，告诉我

不能用作 的子级。我相信这仍然是不正确的 html。我使用的解决方案（虽然我对它不是很满意）只是用 react-router 的链接包装列的内容。

这会导致错误；这不是“正确”的方式，尽管它是 material-ui 的惯用方式。这个成语导致错误的事实意味着它可能根本没有正确的解决方案（因为 HTML 的限制比 material-ui 更严重）

这个解决方案给出了错误...并且用链接标签包装组件破坏了 MUI 设计

【参考方案3】：

有很多解决方法，因为上面的解决方案在控制台上给出了错误validateDOMNesting(...)。

在文本本身（列值）周围添加Link标签 <ColumnCell> ，尽管它将文本更改为更像 <a> 标签 .. 但你可以处理这个。通过这样做 style= textDecoration: 'none', color: 'black'

             <TableCell key=column.id align=column.align>
                  <Link
                    to=`/elsewhere/$row.id`
                    style= textDecoration: 'none', color: 'black' 
                  >
                    value
                  </Link>
             </TableCell>

为每个表格行创建一个按钮。