Html <；thead>；不能显示为<；的子级；div>；。使用react材质ui/core时_Html_Reactjs_React Redux

Html <；thead>；不能显示为<；的子级；div>；。使用react材质ui/core时

html reactjs

Html <；thead>；不能显示为<；的子级；div>；。使用react材质ui/core时,html,reactjs,react-redux,Html,Reactjs,React Redux,第一次反应用户（在这里学习FE）当我试图创建我的表时，我得到了这些错误，因此我的表不会填充我试图通过API拉入的数据我在控制台中收到的错误消息：警告：validateDOMNesting（…）：不能显示为的子级。警告：validateDOMNesting（…）：不能显示为的子级。我的代码： <Paper> <Grid container> <Grid item xs={6}>

第一次反应用户（在这里学习FE）

当我试图创建我的表时，我得到了这些错误，因此我的表不会填充我试图通过API拉入的数据

我在控制台中收到的错误消息：

警告：validateDOMNesting（…）：不能显示为的子级。

警告：validateDOMNesting（…）：不能显示为的子级。

我的代码：

        <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?


名称
可移动的
血型
{
props.dCandidateList.map（（记录，索引）=>{
返回(
{record.fullName}
{record.mobile}
{record.bloodGroup}
)
})
}
注意：我使用@material ui/core包进行react。
我的桌子结构有问题吗？

您需要用

表格

来包装它，而不仅仅是

表格容器

。容器仅用于设置样式。您仍然需要

表

来创建底层

表

元素


名称
可移动的
血型
...

如果没有传递给它的

组件

道具，

TableContainer

默认使用

div

作为包装元素。这就是导致您出错的原因。最终的HTML将是：

<div>
  <thead>
  ...
  </thead>
  <tbody>
  ...
  </tbody>
</div>


...
...

这不是表的正确语法

如果您不需要使用不同的标签（如本例中的

纸张

）来包装表格，您可以将容器全部移除。

您需要使用

表格

，而不仅仅是

表格容器