javascript - 使用 Material UI/React Stepper 创建 "pages"个步骤(如表分页)

Question

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

以下尝试导致所有 10 个步骤仍显示在一个 View 中，而分页则为每 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>
...