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

Question

我正在替换由 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  von `,
            nextIconButtonProps: {
              disabled: true
            }
          }
        }}
      />
    </div>
  );
}

Answer 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  von `,
        nextIconButtonProps: {
          disabled: true
        }
      }
    }}

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

MUI DataGrid replace Pagination - validateDOMNesting(...): <td> cannot appear as a child of <div>

reactjs

pagination

datagrid

material-ui