介绍
React-Masonry-Infinite-Scroll 是一个基于 React 的无限滚动插件，可以在滚动时动态加载元素，支持以下特性：
- 无限滚动；
- 相应式布局；
- 瀑布流布局；
- 懒加载；
- 自定义加载器。
接下来，将介绍 React-Masonry-Infinite-Scroll 的使用方法。
安装
要安装该组件，只需使用 npm：
npm install react-masonry-infinite-scroll
示例
以下是一个使用 React-Masonry-Infinite-Scroll 的示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- ------------
------ ----------------------- ---- --------------------------------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
------- -
-------------------------------
-------------------------------
-------------------------------
-------------------------------
------------------------------
--
---------- ------
--
------------- - -------------------------
-
---------- -
-- ---------------------- -
-------
-
--------------- ---------- ---- ---
-- ------
------------- -- -
---------------
------- -
---------------------
-------------------------------
------------------------------
--
---------- ------
---
-- ------
-
-------- -
----- - ------- --------- - - -----------
------ -
------------------------
----------------------------
--------------
------------------------
---------------------
----------------- ------ ---- -- -- -
---- ---------------- ---------- ------ --------
--
--
--
-
-
-------------------- --- ---------------------------------以上示例展示了如何使用 MasonryInfiniteScroller 组件来实现无限滚动功能。在 App 组件中，定义了 state 中包含 images 和 isLoading，分别表示展示的图片列表和是否正在加载。loadMore 函数是用于加载更多图片的回调函数，它仅在 isLoading 状态为 false 时执行。
MasonryInfiniteScroller 组件中，通过传入 items 属性将 images 数组传递给 Masonry 组件，loadMore 属性指定了一个回调函数，用于动态加载更多图片，isLoading 属性表示是否正在加载更多图片，itemComponent 是用来渲染每个 item 的组件，它接受两个参数：index 表示当前 item 的索引，data 表示当前 item 的数据。
自定义
如果你需要对 React-Masonry-Infinite-Scroll 进行自定义，可通过以下属性来实现：
className：设置容器容器类名，方便自定义样式；masonryOpts：设置 Masonry 布局的参数；loaderComponent：自定义加载器的组件；virtualListHeight：用于计算可视化区域的高度。
例如，要自定义 MasonryInfiniteScroller 组件中的加载器：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- ------------
------ ----------------------- ---- --------------------------------
----- --- ------- --------- -
-----
-------- -
----- - ------- --------- - - -----------
----- ------------ - -
---- -------------------------------------
--
------ -
------------------------
----------------------------
--------------
------------------------
---------------------
----------------- ------ ---- -- -- -
---- ---------------- ---------- ------ --------
--
------------------------------
--
--
-
-
-------------------- --- ---------------------------------通过传入 loaderComponent 属性，覆盖默认的加载器组件，实现自定义。
总结
React-Masonry-Infinite-Scroll 是一个非常实用的 React 组件，它是基于 Masonry 布局实现的无限滚动，具有很大的学习和应用价值。希望本文能对广大前端工程师有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5b81e8991b448e5e41