将数据数组呈现为分页组件

IT技术 javascript reactjs
2021-05-10 04:24:54

我是 React 的新手，所以如果我弄错了术语，请原谅我。

我想创建一种对组件数组进行分页的方法。为此，我按照每页所需的项目数量对数组进行了切片，并将每一页存储到一个 ne 数组中，例如：

const limit = 4
const numPages = 20
let pagewrapper = []

for (let i = 0; i < numPages; i++) {

  let start = i * limit
  let end = start + limit

  let pageItems = children.slice(start, end)

  // Skip first array push as 'page 1' is already showing.
  if (end != limit) {
    pagewrapper.push(<Grid gridContainerStyles={'grid-page__' + i} items={pageItems} />)
  }
}

然后我创建了一个简单的按钮来一次显示每个页面。

    <Button
      onClick={this.pagerHandleClick}
    >
      {'Show more'}
    </Button>

处理程序看起来像：

  pagerHandleClick() {
    this.setState(state => ({
      page: state.page + 1,
    }))
  }

但从这里我有点卡住了。我不知道如何告诉每个<Grid />人揭示它的自我。我谷歌的所有解决方案似乎都表明将组件包装在 if 语句中，但将每个数组项包装在它自己的 if 语句中似乎很奇怪。

过去，我会在 Vanilla JS 或 JQuery 中使用简单的方法完成此操作，getElementByClass.但我不知道在 React 中是否可以通过这种方式实现。

有人能在这里指出我正确的方向吗？

非常感谢

3个回答

假设您一次获得所有数据（例如从 API 获取）并且只需要呈现其中的一部分，您可以简单地动态切片源数据数组，在组件状态中跟踪当前页面（例如，页面长度为 5 个项目)：

const [data, setData] = useState([]),
      [page, setPage] = useState(0),
      maxPage = Math.ceil(data.length/5),
      onNextPage = () => setPage((page+1)%maxPage),
      onPrevPage = () => setPage((page+5-1)%maxPage)

<Grid container>
        {
          data
            .slice(page*5,5*(page+1))
            .map((content,key) => (
              <Grid item {...{key}}>
                <Paper className="paper">{content}</Paper>
              </Grid>
            ))
        }
</Grid>

您可能想查看以下演示以获取完整示例（我猜您一直在使用 material-ui 来设置组件的样式）：

显示代码片段

您可以将 for 循环包装在要显示网格的 html（React）中，如下所示：

创建大小为 numPages 的数组：

let elements = new Array(numPages);

然后在按钮附近的某处附加以下内容： 

<div>
{elements.map((entry, i) => {
let start = i * limit
  let end = start + limit

  let pageItems = children.slice(start, end)

  // Skip first array push as 'page 1' is already showing.
  if (end != limit) {
    return (<Grid gridContainerStyles={'grid-page__' + i} items={pageItems} />)

  }
return ''
})}

</div>

您可以根据页面状态呈现子项的数量。

const pagesToShow = Array.from({ length: pages }); // it will create new array on which will map
pagesToShow.map((_, index) => {
  const PageItems = children.slice(limit*index, limit*index + limit);
  <Grid gridContainerStyles={'grid-page__' + i} items={pageItems} />
}
其它你可能感兴趣的问题
上一篇直接从非网格数据切片？ 下一篇有没有一种简单的方法可以在 OpenSCAD 中拆分模型？