在开发 Web 网站或应用时，我们经常需要监测页面中某些元素是否出现在可视界面内，以此来决定是否触发一些动画或其他的操作。React-enter-viewport 是一个能够帮助我们完成这个任务的 npm 包，本文将提供一份详细的使用教程。
React-enter-viewport 简介
React-enter-viewport 是一个可以用于监测元素是否进入或移出可视界面内的 React 组件。该组件可以方便地被集成到任何基于 React 构建的应用或页面中，并能够提供较高的可配置性。
安装
npm 安装 react-enter-viewport：
npm install --save react-enter-viewport
使用教程
React-enter-viewport 组件接受两个 props：
- onEnterViewport: 元素进入可视界面内的回调函数，可以在该函数中完成一些操作。
- onLeaveViewport: 元素移出可视界面内的回调函数。
例如，我们可以使用以下方式来在元素进入可视界面内时启用一个动画：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------------- ---- -----------------------
----- ----------- ------- --------- -
------------------- - -- -- -
-- ----
-
------------------- - -- -- -
-- ----
-
-------- -
------ -
--------------
------------------------------------------
------------------------------------------
-
-----
-- ----
------
----------------
--
-
-我们可以在元素进入或移出可视界面内时执行任意的自定义函数，并通过设置 state 或 props 来改变元素组件的样式或实现其他的操作。
React-enter-viewport 还提供了一些额外的 props 以改变其默认的行为。
- once: 一个布尔值，表示是否只在元素进入可视界面内时触发一次回调函数。
- intoViewMargin: 一个数值，表示元素进入可视界面内的边缘距离可视界面边缘的最小距离。例如，若该值为 50，则表示元素进入可视界面前 50 像素即会触发回调函数。默认值为零。
- exitViewportThreshold: 一个递增数值数组，表示元素完全移出可视界面内前的循序渐进的阈值。例如，当该值为 [0.25, 0.5] 时，表示元素在离开可视界面后前 25% 和 50% 时会触发 onLeaveViewport 回调函数。
例如，在下面这个示例中，我们设置了元素进入可视界面前离视窗 100 像素即会触发回调，仅当元素进入可视界面时触发一次回调，且仅在元素完全离开可视界面时触发。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------- ---- -----------------------
----- ----------- - -- -- -
----- ------------------- - -- -- -
-- ----
-
----- ------------------- - -- -- -
-- ----
-
------ -
--------------
-------------------------------------
-------------------------------------
--------------------
-----------
---------------------------
-
-----
-- ----
------
----------------
--
-结语
本文简单介绍了在 React 项目中如何使用 React-enter-viewport 来监测元素是否进入或移出可视界面内，并展示了该 npm 包提供的一些常用配置。希望本文对于正在开发基于 React 技术栈的前端工程师们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562dd81e8991b448e0526