<thead> 不能作为 <div> 的子项出现。当使用reactmaterial-ui/core时

Question

第一次反应用户（在这里学习 FE）当我尝试创建表时，我收到这些错误，因此我的表不会填充我尝试通过 API 获取的数据。我在控制台中收到的错误消息：Warning: validateDOMNesting(...): <thead> cannot appear as a child of <div>. Warning: validateDOMNesting(...): <tbody> cannot appear as a child of <div>.我的代码：        <Paper>            <Grid container>                <Grid item xs={6}>                    <DCandidateForm />                </Grid>                <Grid item xs={6}>                    <TableContainer>                        <TableHead>                            <TableRow>                                <TableCell>Name</TableCell>                                <TableCell>Mobile</TableCell>                                <TableCell>Blood Group</TableCell>                            </TableRow>                        </TableHead>                        <TableBody>                            {                                props.dCandidateList.map((record, index) => {                                    return (<TableRow key={index}>                                        <TableCell>{record.fullName}</TableCell>                                        <TableCell>{record.mobile}</TableCell>                                        <TableCell>{record.bloodGroup}</TableCell>                                    </TableRow>)                                })                            }                        </TableBody>                    </TableContainer>                </Grid>            </Grid>        </Paper>note: I am using the @material-ui/core package for react. Is it a problem with how i am structuring my table?

Answer 1

您需要用 a 来包裹它Table，而不仅仅是 a TableContainer。该容器仅用于样式目的。您仍然需要Table创建底层table元素。

<TableContainer>

  <Table>

    <TableHead>

      <TableRow>

        <TableCell>Name</TableCell>

        <TableCell>Mobile</TableCell>

        <TableCell>Blood Group</TableCell>

      </TableRow>

    </TableHead>

    ...

  </Table>

</TableContainer>

如果没有component传递给它的 prop，TableContainer则默认使用 adiv作为包装元素。这就是导致你的错误的原因。最终的 HTML 将会是：

<div>

  <thead>

  ...

  </thead>

  <tbody>

  ...

  </tbody>

</div>

这对于表来说不是正确的语法。

如果您不需要使用不同的标签来包装表格（如Paper示例中所示），则可以完全删除容器。