javascript - 如何修复不能作为子警告出现？

Question

如何修复这些警告？我使用了材质 ui 表格组件。我认为警告来自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>

标签： javascriptcssreactjshtml-tablematerial-ui

Answer 1

原因是您使用 Link 作为 TableRow 的组件。prop 组件告诉 Material-UI 组件基于它将呈现所选组件的内容。不要将链接作为组件传递，而是使用hoverTableRow 上的道具...

{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}`)
}