Material UI，警告 <td> 不能作为 <div> 的子项出现

Question

我正在使用 React、打字稿和 Material UI。我创建了一个非常常见的“创建用户表单”，其中包含用户名、姓名、电子邮件等的基本输入。添加了两个按钮，“编辑”和“删除”。一切似乎都正常运行，但是，我无法解决此错误消息。

  Warning: validateDOMNesting(...): <td> cannot appear as a child of <div>.

这是来自 React 组件的 table：

            <TableContainer className={classes.scroll} component={Paper}>
                <Table stickyHeader aria-label="table">
                    <TableHead>
                        <TableRow>
                            <TableCell>Username</TableCell>
                            <TableCell align="right">First name</TableCell>
                            <TableCell align="right">Last name</TableCell>
                            <TableCell align="right">Email</TableCell>
                            <TableCell align="right">Connect_username</TableCell>
                            <TableCell align="right">Role</TableCell>
                            <TableCell align="left">Edit</TableCell>
                            <TableCell align="left">Delete</TableCell>
                        </TableRow>
                    </TableHead>

                    <TableBody>
                    {(rowsPerPage > 0
                        ? props?.items.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                        : props?.items
                    ).map(item => (
                            <TableRow key={item.user_id}>
                                <TableCell component="th">{item.username}</TableCell>
                                <TableCell align="right">{item.first_name}</TableCell>
                                <TableCell align="right">{item.last_name}</TableCell>
                                <TableCell align="right">{item.email}</TableCell>
                                <TableCell align="right">{item.connect_username}</TableCell>
                                <TableCell align="right">{item.role?.map(r=>r.role).join(",")}</TableCell>
                                <TableCell>
                                    <Button onClick={() => props.handleEdit(item)}>Edit</Button>
                                </TableCell>
                                <TableCell>
                                    <Button onClick={() => props.handleConfirmDelete(item.user_id)}>Delete</Button>
                                </TableCell>
                            </TableRow>
                    ))}
                    </TableBody>
                        <TablePagination
                            rowsPerPageOptions={[10, 25, { label: 'All', value: -1 }]}
                            count={props.items.length}
                            rowsPerPage={rowsPerPage}
                            page={page}
                            onPageChange={handleChangePage}
                            onRowsPerPageChange={handleChangeRowsPerPage}
                        />
                </Table>
            </TableContainer>

Answer 1

component={Paper} 可能是造成这种情况的原因。您可以尝试删除它吗？如果您希望 table 出现在 Paper 组件上，请尝试在 Paper 下嵌套 TableContainer。

Answer 2

将 TablePagination 放在 TableBody 标签中，并将其包裹在 TableRow 中。

遇到了类似的问题并已解决。

像这样：

<TableBody>
    {(rowsPerPage > 0
        ? props?.items.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
            : props?.items)
            .map(item => (
                <TableRow key={item.user_id}>
                   <TableCell component="th">{item.username}</TableCell>
                   <TableCell align="right">{item.first_name}</TableCell>
                   <TableCell align="right">{item.last_name}</TableCell>
                   <TableCell align="right">{item.email}</TableCell>
                   <TableCell align="right">{item.connect_username}</TableCell>
                   <TableCell align="right">{item.role?.map(r=>r.role).join(",")}</TableCell>
                   <TableCell>
                       <Button onClick={() => props.handleEdit(item)}>
                           Edit
                       </Button>
                   </TableCell>
                   <TableCell>
                        <Button onClick={() => props.handleConfirmDelete(item.user_id)}>
                           Delete
                        </Button>
                   </TableCell>
                </TableRow>
                <TableRow>
 <TablePagination
                            rowsPerPageOptions={[10, 25, { label: 'All', value: -1 }]}
                            count={props.items.length}
                            rowsPerPage={rowsPerPage}
                            page={page}
                            onPageChange={handleChangePage}
                            onRowsPerPageChange={handleChangeRowsPerPage}
                        />
                </TableRow>
              ))}
      
</TableBody>

Material UI，警告 <td> 不能作为 <div> 的子项出现

Material UI, Warning <td> cannot appear as a child of <div>

datatable

reactjs

material-ui