reactjs - MUI DataGrid 替换分页 - validateDOMNesting(...)：不能作为子级出现

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 ${1} von ${1}`,
            nextIconButtonProps: {
              disabled: true
            }
          }
        }}
      />
    </div>
  );
}

标签： reactjspaginationdatagridmaterial-ui

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