如何修复 <td> cannot appear as a child of <a> 警告？

Question

如何修复这些警告？我使用了 material ui table 组件。我认为警告来自 component={Link} 到={/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>

Answer 1

原因是您使用 Link 作为 TableRow 的组件。 prop components 告诉 Material-UI 组件基于它将呈现所选组件的内容。不要将 link 作为组件传递，而是在 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>
          ))}

并在传递给该组件的 onClick 处理程序的函数中，使用 history.push('/desired-route') 以编程方式导航到您需要的路由。只需从 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}`)
}

Answer 2

您不能使用 Link 作为 TableRow 的组件，而是使用 useHistory 和 useRouteMatch 到 link 到您想要的页面，

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}
>
...

如何修复 <td> cannot appear as a child of <a> 警告？

How to fix <td> cannot appear as a child of <a> warning?

javascript

css

html-table

reactjs

material-ui