第一次反應用戶（在這里學習 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?
1 回答
MYYA
TA貢獻1868條經驗 獲得超4個贊
您需要用 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示例中所示），則可以完全刪除容器。
- 1 回答
- 0 關注
- 202 瀏覽
添加回答
舉報
0/150
提交
取消