介绍
react-scroll-store 是一个帮助 React 开发者将页面滚动位置存储到 Redux 中的 npm 包。通过使用这个库，你可以方便地跨页存储和还原滚动位置。
安装
你可以通过 npm 或者 yarn 进行安装：
--- ------- ------------------ ------
或者
---- --- ------------------
使用方法
请确保在入口文件中使用了 Redux Provider 的 <Provider> 组件，并且将生成的 store 传递给了 <Provider> 组件。
1. 在 reducer 中合并所有的 reducer
------ - --------------- - ---- -------- ------ - ------- -- ------------------ - ---- --------------------- ----- ----------- - ----------------- ------------ ------------------- -- ----- ------- --- ------ ------- ------------
2. 在组件中使用 ScrollStore 组件包裹页面内容
在需要使用 ScrollStore 的页面组件中，使用 ScrollStore 组件进行包裹。
------ ----------- ---- ---------------------
-------- ------------------ -
------ -
-------------
----
--------------
--
-
------ ------- ------------3. 使用 withScrollStore 函数包裹需要还原滚动位置的组件
withScrollStore 是一个高阶函数，它接受一个组件作为参数，并返回一个新的组件。使用 withScrollStore 包裹你需要还原滚动位置的组件。
------ - --------------- - ---- ---------------------
-------- ---------------------- -
-- ------ ---------------------------- ---------
------ -
-- ----
--
-
------ ------- ---------------------------------4. 配置 getScrollNamespace 和 getKeys 函数
getScrollNamespace 和 getKeys 函数是可选的配置项，你可以使用它们来详细地控制存储和还原滚动位置的粒度。
------ - ------------------- ------- - ---- ---------------------
--------------------
---------- --------
-- ----- ----------------- ------------
-- ------- -----------------
------------ ---------
---
---------
----- -
---- -- -- -- -- ---
---------- --------
--
---示例代码
------ ----- ---- --------
------ - ---------------- ----------- - ---- --------
------ - -------- - ---- --------------
------ ----------- ---- ---------------------
------ - ---------------- ------------------- ------- - ---- ---------------------
--------------------
---------- --------
------------ ---------
---
---------
----- -
---- -- -- -- -- ---
---------- --------
--
---
----- ----------- - -----------------
------------ -------------------
---
----- ----- - -------------------------
-------- ---------------------- -
------ -
---- -------- ------- -------- ---
----
------
--
-
----- ---------------- - ---------------------------------
-------- ---------- -
------ -
--------- --------------
-------------
---- -------- ------- -------- ---
----------------- --
------
--------------
-----------
--
-
------ ------- ----总结
本文介绍了 react-scroll-store 的基础使用方法和可选配置项。通过使用这个库，开发者可以方便地跨页存储和还原页面滚动位置。希望这篇文章能够帮助你学习和使用这个 npm 包。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fd081e8991b448dd5b9