使用Material UI / React Stepper创建步骤的“页面”（如表格分页）

Question

将Material UI与React结合使用，我试图为流程中的每4个步骤创建步骤的”页面”。

以下尝试导致所有10个步骤仍在一个视图中显示，而分页为每4个步骤计算了正确的页面数。

return (
    <Grid>
      <Stepper>
        {statusArr.map((label) => {
          return (
            <Step key={label}>
              <StepLabel>{label}</StepLabel>        
            </Step>
          );
        })}
      </Stepper>
      <TablePagination
        component="div"
        count={statusArr.length}
        rowsPerPage={[4]}
        page={page}
        backIconButtonProps={{
          'aria-label': 'previous page',
        }}
        nextIconButtonProps={{
          'aria-label': 'next page',
        }}
        onChangePage={handleChangePage}
      />
    </Grid>
  );

理想情况下，我将以here所示的步进器“点”代表步骤的每一页，而不是表的分页外观/功能。

请让我知道上下文是否需要其他代码，并感谢您的想法/建议。

Answer 1

您只需要做一点数学就可以得到正确的页面数

...
const stepsPerPage = 4;
const pageCount = Math.ceil(statusArray.length / stepsPerPage);

return (
  <Grid>
    <Stepper>
      {Array(pageCount).fill().map(page => (
        <Step>
...