【问题标题】:reactjs return to same segment of pagereactjs返回页面的同一段
【发布时间】:2015-07-22 20:04:13
【问题描述】:

我有一个内置在 reactjs (SPA) 中的长页面。它有很多链接。当用户向下滚动并单击其中一个链接时,将呈现新页面。

一切都很好,但是当用户点击返回按钮(浏览器)时,之前的长页面会重新呈现并返回到顶部。

是否有任何简单的解决方案可以确保 used 转到他上次点击的页面的完全相同的部分?

【问题讨论】:

    标签: javascript reactjs


    【解决方案1】:

    我会在每个链接上注册一个点击事件并防止默认行为或使用其他元素,例如带有点击事件的跨度。
    在此之后您需要存储滚动高度,例如here

    myclick: function() {
      var node = this.getDOMNode();
      node.scrollTop = node.scrollHeight;
      //navigate to your new site , update location
    },
    

    scrollTop 存储在状态或local storage 中,当用户点击后退按钮时,您需要检查是否设置了scrollTop 并将scrollposition 更新回此节点。

    可以查看thisthis。但我认为没有简单的解决方案。

    也许其中一些链接会有所帮助:Link 1Link 2

    React-Router

    【讨论】:

    • +1 回答。这可能对我没有用,因为我的页面是动态的。用户在点击时呈现内容。在离开页面之前,我需要找出用户点击了哪个链接。我将存储该链接并恢复该站点。是否有可能获得该链接?
    • @JS-JMS-WEB 可能会给每个链接一个唯一的 id (ancor) 并滚动到这个 id。像 domain/yoursite#hash 这样的:facebook.github.io/react/docs/…,只要你的 id 是唯一的,内容就可以是动态的
    • 如果我通过重新渲染相同数量的组件来保持页面状态。 React 默认工作!但它在 Firefox 中不起作用。
    猜你喜欢
    • 2018-09-15
    • 2011-01-11
    • 2013-12-20
    • 2014-09-16
    • 1970-01-01
    • 2018-08-09
    • 2012-09-26
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多