反应：在用户导航之前恢复滚动位置/调用 history.replace()

Question

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

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

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

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

Answer 1

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

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

希望这有帮助。