时间戳

首页 > 解决方案 > 使用 Material UI/React Stepper 创建步骤的“页面”（如表格分页）

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

问题描述

使用带有 React 的 Material UI，我试图为流程中的每 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>
  );

理想情况下，我会在这里显示由步进器“点”表示的每一页步骤，而不是表格分页外观/功能。

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

标签： javascriptreactjspaginationmaterial-uiuistepper

解决方案

您只需做一些数学运算即可获得正确的页数

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

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

推荐阅读