第一次反應(yīng)用戶（在這里學(xué)習(xí) FE）當(dāng)我嘗試創(chuàng)建表時，我收到這些錯誤，因此我的表不會填充我嘗試通過 API 獲取的數(shù)據(jù)。我在控制臺中收到的錯誤消息：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?
1 回答
MYYA
TA貢獻(xiàn)1868條經(jīng)驗 獲得超4個贊
您需要用 a 來包裹它Table，而不僅僅是 a?TableContainer。該容器僅用于樣式目的。您仍然需要Table創(chuàng)建底層table元素。
<TableContainer>
? <Table>
? ? <TableHead>
? ? ? <TableRow>
? ? ? ? <TableCell>Name</TableCell>
? ? ? ? <TableCell>Mobile</TableCell>
? ? ? ? <TableCell>Blood Group</TableCell>
? ? ? </TableRow>
? ? </TableHead>
? ? ...
? </Table>
</TableContainer>
如果沒有component傳遞給它的 prop，TableContainer則默認(rèn)使用 adiv作為包裝元素。這就是導(dǎo)致你的錯誤的原因。最終的 HTML 將會是：
<div>
? <thead>
? ...
? </thead>
? <tbody>
? ...
? </tbody>
</div>
這對于表來說不是正確的語法。
如果您不需要使用不同的標(biāo)簽來包裝表格（如Paper示例中所示），則可以完全刪除容器。
- 1 回答
- 0 關(guān)注
- 211 瀏覽
添加回答
舉報
0/150
提交
取消