问如何添加<Link>反应-路由器每种材料-UI TableRow？
EN

Stack Overflow用户

提问于 2018-06-04 18:07:51

回答 5查看 14.8K关注 0票数 21

如何在.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;

reactjs

redux

react-router

material-ui

react-router-dom

回答 5

Stack Overflow用户

发布于 2019-07-22 18:01:30

正确的方法是使用component组件的TableRow支柱：

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

票数 15

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

票数 5

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