简介
react-find-while-scrolling 是一款方便在 React 项目中实现使用滚动查找元素的包。它可以自动监测滚动事件并返回满足条件的第一个 DOM 元素对象。这个包减少了我们在使用自己写的方法时的代码量，提高了代码的可维护性。
安装
使用 npm 安装：
npm install react-find-while-scrolling --save
使用
首先，需要引入 react-find-while-scrolling：
import findWhileScrolling from 'react-find-while-scrolling';
然后，我们可以在 React 组件的 componentDidMount() 函数中请求渲染：
componentDidMount() {
this.renderElement();
}renderElement() 函数是用于查找元素的函数，我们可以通过 findWhileScrolling() 函数来实现：
-- -------------------- ---- -------
--------------- -
---------------
--------------------- --------------------
--------- --------------------- -- -----------
---------- ----- -- ----
----------------- ------- -- ----------------- --- --------------- -- -------
---------------- ------ -- -------
--
---
-到这里我们就已经成功的使用了 react-find-while-scrolling。
参数说明
- rootNode：放置被查找元素的根节点，一般为document.body。
- component：当前组件。
- matchingFunction：用于判断满足条件的函数，返回布尔值。
- searchDirection：查找方向，可以为 "down" 或者 "up"，默认是 "down"。
示例
下面是一个简单的实现，假设我们要在一个列表中查找第一个有 "mark" 类名的元素：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------ ---- -----------------------------
----- ------- ------- --------------- -
------------------- -
---------------------
-
--------------- -
---------------
--------------------- --------------------
--------- ---------------------
---------- -----
----------------- ------- -- ----------------- --- -------
---------------- ------
--
---
-
-------- -
------ -
-----
----
----------
----------
--- -----------------------
----------
----------
-----
-------------------------------- -- -
--------------------------------------------------
--
------
--
-
-在上面的代码中，我们将 React 组件 Example 的状态设置为查找到的第一个满足条件的元素。
结论
react-find-while-scrolling 是一款非常方便的用于查找元素的 npm 包，可以极大的提高代码的可维护性。如果你在 React 项目中需要查找元素，我强烈建议你使用这个包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551c881e8991b448cf2ad