<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示例中所示），则可以完全删除容器。