Material-ui tablepagination各种报表的默认每页行数

Question

我一直在遵循一个关于材料uiTablePagination的例子，它们作为useTable组件，并具有以下代码:

import React, { useState } from 'react'
import { Table, TableHead, TableRow, TableCell, makeStyles, TablePagination, TableSortLabel } from '@material-ui/core'
const useStyles = makeStyles(theme => ({
table: {
marginTop: theme.spacing(1),
'& thead th': {
fontWeight: '800',
backgroundColor: '#e0e0e0',
color: '#000'                      
},
'& tbody td': {
fontWeight: '500',
},
'& tbody tr:hover': {
backgroundColor: '#bee8fd',
cursor: 'pointer',
},
minWidth: 650
},
}))
export default function useTable(records, filterFn) {
const classes = useStyles();
const pages = [5, 10, 25, 50, 75, 100]
const [page, setPage] = useState(0)
const [rowsPerPage, setRowsPerPage] = useState(pages[page])
const [order, setOrder] = useState()
const [orderBy, setOrderBy] = useState()
const handleChangePage = (event, newPage) => {
setPage(newPage);
}
const handleChangeRowsPerPage = event => {
setRowsPerPage(parseInt(event.target.value, 10))
setPage(0);
}
const TblPagination = () => (<TablePagination
component="div"
page={page}
rowsPerPageOptions={pages}
rowsPerPage={rowsPerPage}
count={records.length}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>)
const recordsAfterPagingAndSorting = () => {
return stableSort(filterFn.fn(records), getComparator(order, orderBy))
.slice(page * rowsPerPage, (page + 1) * rowsPerPage)
}
return {
TblPagination,
recordsAfterPagingAndSorting
}
}

在另一个名为JobReport.js的组件中，我导入这个useTable组件，如下所示

import useTable from "./useTable";

，在我的报告的底部，我调用从useTable.js

返回的组件<TblPagination />

我的问题是，目前在useTable.js中，rowsPerPage根据状态值设置为5。我想要能够实现的是提供这个useTable.js组件从任何其他组件使用它的动态值，设置该组件的rowPerPage。

因此，在ComponentA.js中，我可能有一个报告，我想将rowPerPage默认为10，而在另一个组件中，我可能将该报告默认为50，但仍然调用useTable.js组件。

我想我可以把这个作为道具传递给<TblPagination page={3}/>以返回50，但这不起作用。

有了这个设置，无论如何，我可以将<TblPagination />

内的行设置为默认值50我实际上使用的useTable.js是许多不同的组件，并希望能够改变rowsPerPage不同的值在这些不同的组件。

如果我在useTable.js中改变它，那么所有调用它的组件将有默认的50行，这不是我想要的。

Answer 1

UPDATE:让使用该钩子的组件能够定义有多少个rowsPerPage。如果没有定义，设置默认值为50。

export default function useTable(records, filterFn, customRowsPerPage) {
//..
const [rowsPerPage, setRowsPerPage] = useState(customRowsPerPage || 50)
//..
}

---

而不是:

const [rowsPerPage, setRowsPerPage] = useState(pages[page])

设置默认值为50:

const [rowsPerPage, setRowsPerPage] = useState(50)