React Mui DataGrid 使用组件分页 rowsPerPageOptions 未显示答案

【问题标题】：React Mui DataGrid use Components Pagination rowsPerPageOptions is not shownReact Mui DataGrid 使用组件分页 rowsPerPageOptions 未显示
【发布时间】：2022-08-23 12:19:43
【问题描述】：

我使用 Mui DataGrid 组件分页，但我的 onPageSizeChange 和 rowsPerPageOptions 没有显示。

<DataGrid
    rows={posts}
    columns={columns}
    pageSize={pageSize}
    onPageSizeChange={(newPageSize) =>
        setPageSize(newPageSize)
    }
    rowsPerPageOptions={[5, 10, 20, 50]}
    autoHeight={true}
    onRowClick={(rowData) => {
        window.location.href = `./${config.hashRouter}/EditPost?PostID=${rowData.id}`;
    }}
/>

<DataGrid
    rows={posts}
    columns={columns}
    pageSize={pageSize}
    onPageSizeChange={(newPageSize) =>
        setPageSize(newPageSize)
    }
    rowsPerPageOptions={[5, 10, 20, 50]}
    autoHeight={true}
    onRowClick={(rowData) => {
        window.location.href = `./${config.hashRouter}/EditPost?PostID=${rowData.id}`;
    }}
    components={{
        Pagination: CustomPagination,
    }}
/>

标签： reactjs material-ui datagrid

【解决方案1】：

我在我的自定义分页中选择

<FormControl variant="standard">
                    <Select
                        labelId="demo-simple-select-label"
                        id="demo-simple-select"
                        value={pageSize}
                        label="Size"
                        onChange={handleChange}
                    >
                        <MenuItem value={10}>10</MenuItem>
                        <MenuItem value={20}>20</MenuItem>
                        <MenuItem value={30}>30</MenuItem>
                        <MenuItem value={40}>40</MenuItem>
                        <MenuItem value={50}>50</MenuItem>
                    </Select>
                </FormControl>

【讨论】：