如何添加<Link>反应-路由器每种材料-UI TableRow？
如何添加<Link>反应-路由器每种材料-UI TableRow？
提问于 2018-06-04 18:07:51
如何在.map?中为每个TableRow添加链接 *我的错误是validateDOMNesting(.)：不能以"< a >“im的”“的子级出现--使用react路由器react路由器-dom 如何在表.map的每个循环中添加TableRow链接？
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;回答 5
Stack Overflow用户
发布于 2019-07-22 18:01:30
正确的方法是使用component组件的TableRow支柱：
<TableRow component={Link} to={`/bond/${n}/`} key={n}>
...
</TableRow>Stack Overflow用户
发布于 2022-03-06 05:29:58
几乎所有组件都使用component='div' (Table、TableHead、TableBody、TableCells，甚至TableHead中的(仅) TableRow )和其他TableRow(在TableBody中)使用component={Link}：
<TableContainer>
<Table component='div'>
<TableHead component='div'>
<TableRow component='div'> { /* Use `div` here, too */ }
<TableCell component='div'>
...
</TabelCell>
<TableCell component='div'>
...
</TabelCell>
...
</TableRow>
</TableHead>
<TableBody component='div'>
<TableRow component={Link}> { /* Use `Link` here */ }
<TableCell component='div'>
...
</TabelCell>
<TableCell component='div'>
...
</TabelCell>
...
</TableRow>
<TableRow component={Link}> { /* Use `Link` here */ }
...
</TableRow>
...
</TableBody>
</Table>
</TableContainer>顺便说一句，您错过了HTML本机<table>。但一切看起来都是土生土长的。
我认为，不幸的是，没有其他办法。请参阅：https://stackoverflow.com/a/17147876/5318303
Stack Overflow用户
发布于 2022-03-24 02:38:18
对于那些使用react路由器-dom v6+的用户来说，这是可行的：
import { useNavigate } from "react-router-dom";
...
export const MyComponent({ }) {
let navigate = useNavigate();
// Using table as per the OP's code:
return (
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>Bondame</TableCell>
</TableRow>
</TableHead>
<TableBody>
{[1, 2, 3].map(n => {
return (
<TableRow onClick={() => { navigate(`/bond/${n}/`); }}>
<TableCell component="th" scope="row">
{n}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50691049
复制相关文章
相似问题
腾讯云开发者
