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

Question

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

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

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

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

Answer 1

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

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

希望这对您有所帮助。