MUI DataGrid 替换分页 - validateDOMNesting(...): <td> 不能作为 <div> 的子项出现答案

【问题标题】：MUI DataGrid replace Pagination - validateDOMNesting(...): <td> cannot appear as a child of <div>MUI DataGrid 替换分页 - validateDOMNesting(...): <td> 不能作为 <div> 的子项出现
【发布时间】：2021-12-12 17:52:33
【问题描述】：

我正在替换 Material-UI 制作的 DataGrid 组件中的分页并得到以下控制台错误：Warning: validateDOMNesting(...): <td> cannot appear as a child of <div>

我认为我没有做任何特别的事情，所以我想知道问题到底是什么。我是否使用了错误的分页组件？

这是重现问题的CodeSandbox。

我部分使用了 MUI、React 和 Typescript 的 v5。

import { TablePagination } from "@mui/material";
import { DataGrid, GridColumns } from "@mui/x-data-grid";

export default function App() {
  const columns: GridColumns = [
    {
      field: "foo"
    }
  ];

  const rows = [
    {
      id: "bar"
    }
  ];

  return (
    <div style={{ height: 500 }}>
      <DataGrid
        columns={columns}
        rows={rows}
        components={{ Pagination: TablePagination }}
        componentsProps={{
          pagination: {
            count: 1,
            page: 0,
            onPageChange: () => {},
            rowsPerPage: 10,
            rowsPerPageOptions: [10, 25, 50, 100],
            onRowsPerPageChange: () => {},
            labelRowsPerPage: "Zeilen pro Seite",
            labelDisplayedRows: () => `Seite ${1} von ${1}`,
            nextIconButtonProps: {
              disabled: true
            }
          }
        }}
      />
    </div>
  );
}

【问题讨论】：

标签： reactjs pagination datagrid material-ui

【解决方案1】：

TablePagination 默认组件为td

mui-datagrid 使用 div 而不是 table / tr / td 标签，所以你必须说组件是 div ：

    componentsProps={{
      pagination: {
        count: 1,
        page: 0,
        component: "div", // here
        onPageChange: () => {},
        rowsPerPage: 10,
        rowsPerPageOptions: [10, 25, 50, 100],
        onRowsPerPageChange: () => {},
        labelRowsPerPage: "Zeilen pro Seite",
        labelDisplayedRows: () => `Seite ${1} von ${1}`,
        nextIconButtonProps: {
          disabled: true
        }
      }
    }}

【讨论】：

它对我有用。很好的答案....