如何添加<链接>每个 Material-UI TableRow 都有反应路由器吗? [英] How to add <Link> react-router per each Material-UI TableRow?

问题描述

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

*我的错误是 validateDOMNesting(...): 不能作为< a >"的孩子出现我正在使用反应路由器 react-router-dom

*my error is validateDOMNesting(...): cannot appear as a child of "< a >" im using react router react-router-dom

如何在TableTableRow中.map的每个循环中添加链接?

how to add link in every loop of .map in Table 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;

推荐答案

正确的做法是使用 TableRow 组件的 component 属性:

The correct way to do this is to use the component prop of the TableRow component:

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

这篇关于如何添加&amp;lt;链接&gt;每个 Material-UI TableRow 都有反应路由器吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！