react.js - react分页问题

问题描述

问 题

现在我用react做了这样一个网页：

如图所示，模块一是一个表单，可以选择条件，比如分类什么的，点击确定就发请求。

模块二是内容显示区域，请求返回的数据渲染在区域二，是一个列表。

模块三是分页，发起请求返回对应选择条件和页数的数据渲染在模块二。

现在有一个问题，就是当选了条件或者分页，点击模块二中的某一项跳到了详情页，然后再返回的时候又回到了最初的状态，就是展示的是所有条件的条件和第一页的数据，而我希望对的是能回到跳转前的状态，就是展示跳转前选定的条件和页数对应的数据。我该怎么做呢？

而其实在实际的react开发中这种分页是怎么做的？可以结合react-router。

如果是没有分页的模块三，而是在最下边有一个区域，点击可以加载更多，这样的话又怎么实现上面所提对的需求呢？

求大神来答！！！
或者给个思路也好啊~~~

解决方案

1. 可以把筛选的参数以及分页的参数都放在url中，比如：

   .../listPageA/name=ash&page=1&size=20 (路由设置成‘.../listPageA/:filterData’)
       

   这样的话实际上每一次筛选和分页都是一次路由的跳转，在组件的componentDidMount里面去获取路由传递的参数然后发送请求并填充筛选项。这个用react-router配合比较好做，缺点就是url会比较丑，不在意url的话，这个是最实用的也是最简单的。

2. 使用localStorage，保存页面中的筛选信息以及分页信息；这样的话，需要考虑一下什么时候清除localStorage以及用户如果开了多个相同页面应该怎么处理。

3. 可以换一种设计的思维，将详情的页面使用window.open在新的窗口中打开。

去掉模块三使用加载更多的需求的话，上面几点也是适用的。

这篇关于react.js - react分页问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！