reactjs - 恢复后退按钮上的滚动位置

Question

我有一个路由处理程序，它从商店请求数据，然后映射该数据以呈现组件列表。我的问题是，当我导航到另一个页面然后返回时，滚动位置不会恢复，因为必须重新渲染组件。是否有延迟设置滚动位置直到列表呈现，或者在任何类型的导航上保留和恢​​复呈现组件的状态？

Answer 1

您可以在组件上使用willTransitionTo处理程序来延迟路由转换，直到您从 API 异步获取数据。这样，路由器可以恢复正确的滚动位置，因为组件会立即用所有数据渲染。

Answer 2

如果可以的话，我会缓存你正在渲染的列表，那么后退/滚动应该不是问题。

如果您无法缓存列表，您可以像这样在调用中提供自己的：scrollBehaviorRouter.create

var router = Router.create({
  routes: routes,
  scrollBehavior: YourScrollBehavior
});

Answer 3

您是否考虑过仅制作视图display: none？

使用 id 属性对所有的进行序列化<divs/>，并在创建它们时保留一个维护历史记录的数组display: none。

现在，当一个使用回到历史时，访问这个对象并再次显示那个旧的 div。

此解决方案允许您避免再次重新渲染组件，并且它还使浏览器更快，因为display: none不影响浏览器性能的 DOM 节点。

var divHistory = [
  {id: 'qwer', scrollPosition: 30},
  {id: 'poiu', scrollPosition: 102},
  {id: 'asdf', scrollPosition: 0},
  {id: 'lkj', scrollPosition: 0},
  {id: 'zxcv', scrollPosition: 4050}
]