Как добавить <Link>реагирующий маршрутизатор для каждого TableRow Material-UI? - PullRequest
Новая
       41

Как добавить <Link>реагирующий маршрутизатор для каждого TableRow Material-UI?

0 голосов
/ 05 июня 2018

Как добавить ссылку на TableRow в .map?

* моя ошибка validateDOMNesting (...): не может быть дочерней по отношению к ""я использую реагирующий маршрутизатор реактив-маршрутизатор-дом

как добавить ссылку в каждом цикле .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;

Ответы [ 2 ]

0 голосов
/ 23 июля 2019

Правильный способ сделать это - использовать опору component компонента TableRow: 

<TableRow component={Link} to={`/bond/${n}/`} key={n}>
...
</TableRow>
0 голосов
/ 05 июня 2018

Ссылка применяется к компоненту, для которого определено onClick, поэтому оберните ваш TableRow в div следующим образом: 

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