[英]How to fix <td> cannot appear as a child of <a> warning?
How to fix these warnings?如何修复这些警告? I used material ui table component.我使用了材质 ui 表格组件。 I think the warnings comes from component={Link} to={ /patient/${patient.id}
}我认为警告来自component={Link} to={ /patient/${patient.id}
}
<TableContainer className={styles.tableContainer} component={Paper}>
<Table aria-label="patients infomation table">
<TableHead className={styles.tableHead}>
<TableRow>
<TableCell align="right">First Name</TableCell>
<TableCell align="right">Last name</TableCell>
<TableCell align="right">DOB</TableCell>
<TableCell align="right">Phone Number</TableCell>
<TableCell align="right">Email</TableCell>
</TableRow>
</TableHead>
<TableBody>
{patients.map((patient) => (
<TableRow
component={Link}
to={`/patient/${patient.id}`}
onClick={selectPatientClick}
key={patient.id}
className={styles.tableRow}
>
<>
<TableCell align="right">{patient.fName}</TableCell>
<TableCell align="right">{patient.lName}</TableCell>
<TableCell align="right">{patient.dob}</TableCell>
<TableCell align="right">{patient.pNumber}</TableCell>
<TableCell align="right">{patient.email}</TableCell>
</>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
The reason is that you are using the Link as component to the TableRow.原因是您使用 Link 作为 TableRow 的组件。 The prop components tells Material-UI the component base on what it will render the selected component. prop 组件告诉 Material-UI 组件基于它将呈现所选组件的内容。 Instead of passing the link as a component, use the hover
prop on the TableRow...不要将链接作为组件传递,而是使用 TableRow 上的hover
...
{patients.map((patient) => ( <TableRow hover onClick={selectPatientClick} key={patient.id} className={styles.tableRow} > <> <TableCell align="right">{patient.fName}</TableCell> <TableCell align="right">{patient.lName}</TableCell> <TableCell align="right">{patient.dob}</TableCell> <TableCell align="right">{patient.pNumber}</TableCell> <TableCell align="right">{patient.email}</TableCell> </> </TableRow> ))}
and in the function you are passing to the onClick handler of that component, navigate programaticaly to the route you need using history.push('/desired-route')
.并在 function 中传递给该组件的 onClick 处理程序,使用history.push('/desired-route')
以编程方式导航到您需要的路线。 Just import the useHistory hook from react-router-dom只需从 react-router-dom 导入 useHistory 钩子
import {useHistory} from 'react-router-dom'... const history = useHistory() const selectPatientClick = () => { //do whatever you need and finally... history.push(`/patient/${patient.id}`) }
You can't use Link as component of TableRow, instead use useHistory
and useRouteMatch
to link to page you want,您不能使用 Link 作为 TableRow 的组件,而是使用useHistory
和useRouteMatch
链接到您想要的页面,
import {useHistory, useRouteMatch} from 'react-router-dom'
...
const {url} = useRouteMatch()
const history = useHistory()
...
<TableRow
onClick={() => history.push(`${url}/${patient.id}`)}
key={patient.id}
className={styles.tableRow}
>
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.