我正在替換 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>
);
}
uj5u.com熱心網友回復：
TablePagination 默認組件是 td
mui-datagrid 使用 divs 而不是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
}
}
}}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338453.html
下一篇：它的回傳型別'void|Element'不是有效的JSX元素。型別'void'不能分配給型別'Element|空值'