react分页问题

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

图片描述

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

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

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

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

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

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

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

阅读 3.1k
评论 更新于 2017-04-17
    3 个回答
    Ash_Shen
    • 2.7k
    1. 可以把筛选的参数以及分页的参数都放在url中,比如:

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

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

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

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

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

    评论 赞赏 2017-04-17

      既然结合了react-router了,就把redux也加上,用全局的store储存状态就行。

      评论 赞赏 2017-04-17

        楼上两位以已经回答的相当好了, 我也无需重复,
        给个 Demo: https://marmelab.com/admin-on...

        至于"加载更多"的方法, 可以通过 perPage 的增加去实现.

        评论 赞赏 2017-04-18
          撰写回答

          登录后参与交流、获取后续更新提醒