首页 > 编程知识 正文

react怎么做页面跳转(react单页面应用)

时间:2023-05-05 19:29:10 阅读:69444 作者:664

需求:

从具有水平和垂直滚动条的列表页面进入详细信息页面,返回时列表页面的活动栏返回到上一个位置。

难点:

1 .列表使用了antd的table组件。 滚动条是此table组件的一部分,您可以在浏览器返回时自己记录页面或文档滚动条,但不能记录某个元素的滚动条。

2 .数据读取。 每次进入列表页时都会重新读取数据。 列表的初始值为空,还必须动态读取标头。 因此,返回页面时,整个列表没有高度和宽度,因此设置初始滚动条的位置也没有效果。

解决方案:

1 .设置列表数据初始值

可以在本地保存与离开列表页面时加载的列表相关的数据,也可以将其放入redux中,以便在返回页面时直接获取值。 列表不会没有宽度。 在列表页初始化时,即构造器时,可以检索保存的数据并为其赋值。

2 .设置列表滚动条位置的初始值

检查列表页中渲染后的节点,找到与滚动条对应的元素,然后使用dom作为目标元素。

离开页面时记录滚动条的位置,并在生命周期didmount中操作dom以设置滚动条的初始位置。

#离开页面时,可以是componentWillUnmount,也可以是跳页前。

使用dom时,将本机js方法与ReactDom的ReactDom.FindDOMNode方法组合在一起。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。