React+TypeScript+Material UI表格出现DOM嵌套警告该如何解决

问题原因 #

• 第一个警告：HTML规范要求<tfoot>标签只能作为<table>的直接子元素，你当前把TableFooter组件放在了Table组件外部，TableContainer内部除Table外的元素默认渲染为<div>，所以导致<tfoot>被嵌套在<div>下触发警告。
• 第二个警告：HTML规范要求<tfoot>的直接子元素只能是<tr>（表格行），你直接把TablePagination放在TableFooter里，没有外层包裹TableRow，导致TablePagination生成的<td>直接挂载在<tfoot>下触发警告。

修复方案 #

调整TableFooter的位置，同时给TablePagination外层嵌套TableRow，并设置对应列数的colSpan属性即可，修复后代码如下：

<TableContainer className={classes.scroll} >
    <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?.user_items.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
            : props?.user_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>
        <TableFooter>
            <TableRow>
                <TablePagination
                    colSpan={8}
                    rowsPerPageOptions={[10, 25, { label: 'All', value: -1 }]}
                    count={props.user_items.length}
                    rowsPerPage={rowsPerPage}
                    page={page}
                    onPageChange={handleChangePage}
                    onRowsPerPageChange={handleChangeRowsPerPage}
                />
            </TableRow>
        </TableFooter>
    </Table>
</TableContainer>

注：colSpan的值需要和你表格的总列数保持一致，当前表格共8列所以设为8，后续调整列数时同步修改该值即可。

内容的提问来源于stack exchange，提问作者Seb