MUI DataGrid 替换分页 - validateDOMNesting(...): <td> 不能作为 <div> 的子项出现
MUI DataGrid replace Pagination - validateDOMNesting(...): <td> cannot appear as a child of <div>
我正在替换由 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>
);
}
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
}
}
}}
我正在替换由 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>
);
}
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
}
}
}}