Question

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

*我的错误是validateDOMNesting（...）：不能显示为“＆lt; a＆gt;”的子项   我正在使用反应路由器react-router-dom

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

Answer 1

执行此操作的正确方法是使用component组件的TableRow道具：

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

Answer 2

有很多解决方法，因为上述解决方案在控制台上给出了错误 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>

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

Answer 3

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

MainActivity

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

3 个答案: