javascript - 在用户导航之前 react : Restore scroll position/Calling history. Replace()

标签 javascript reactjs react-router

我的用例是恢复 <div> 的滚动位置当用户导航回各自的(父)路由时,在 React 组件内。我跟踪 <div> 的滚动位置使用onScroll 。我的想法是将滚动位置保存在历史状态中。可调用history.replace()在滚动事件处理程序中使用更新的状态对象,但性能很差(我假设 history.replace() 强制组件重新渲染)。

我也尝试调用history.replace()componentWillUnmount() (同时将滚动位置保存为组件的实例属性)。然而,这已经太晚了,因为 history.location已更改至新位置。

历史监听器 ( history.listen() ) 也是如此。

是否有替代方法来实现滚动位置恢复?

最佳答案

从您的描述来看,您可能正在与 React 及其对历史记录 API 的使用作斗争。

另一种解决方案可能是仅存储历史记录中的数组位置,这仅需要一次替换,并管理更新以滚动数组中的值本身(例如)localStorage .

希望这对您有所帮助。

关于javascript - 在用户导航之前 react : Restore scroll position/Calling history. Replace(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56534250/

相关文章:

javascript - 灯塔审计 : Script evaluation vs Script Parsing

javascript - ramda js 与 find、pick 和 trim 值组合

javascript - 将 javascript webdriver.Capabilities 转换为字符串

reactjs - React Native 打开一个 Activity

reactjs - React Router - 如何实现离开页面动画?

javascript - React-router:type.toUpperCase 不是函数

javascript - 循环遍历 Chart.js 输入的数组

reactjs - 使用 Typescript 显示从 Usestate 钩子(Hook)接收到的数组

javascript - React Route With Params 找不到路线的位置

reactjs - 如何使用 react-router 从哈希 URL 获取参数?