如何使用ReactVisibilitySensor检测组件何时进入视口

介绍

以编程方式检测 React 组件何时进入视口需要滚动事件侦听器并计算元素的大小。

使用 React Visibility Sensor 为您提供了一个 React 组件来为您完成此任务。

在本教程中，您将学习如何使用 React Visibility Sensor 来检测您的 React 组件何时进入视口。

先决条件

要完成本教程，您需要：

Node.js 的本地开发环境。关注【X7X】如何安装Node.js并创建本地开发环境【X76X】。

本教程已使用 Node v15.3.0、npm v6.14.9、react v17.0.1 和 react-visibibilty-sensor v5.1.1 进行了验证。

第 1 步 — 设置项目

考虑具有多个图像的页面的场景。当图像进入视口时，您希望应用 CSS 过渡以使图像淡入。您将 React Visibility Sensor 应用于每个图像以完成此操作。

首先使用 create-react-app 生成 React App，然后安装依赖项：

npx create-react-app react-visibility-sensor-example

切换到新的项目目录：

cd react-visibility-sensor-example

安装 react-visibility-sensor 包：

npm install react-visibility-sensor@5.1.1

现在，您可以运行 React 应用程序：

npm start

修复项目的任何错误或问题。并在网络浏览器中访问 localhost:3000。

一旦你有一个工作的 React 应用程序，你就可以开始使用视口检测构建你的自定义组件。

第 2 步 — 应用 React 能见度传感器

使用文本编辑器创建一个新的 VisibilitySensorImage.js 文件：

src/VisibilitySensorImage.js

import React, { Component } from 'react';
import VisibilitySensor from 'react-visibility-sensor';

class VisibilitySensorImage extends Component {
  state = {
    visibility: false
  }

  render() {
    return (
      <VisibilitySensor
        onChange={(isVisible) => {
          this.setState({visibility: isVisible})
        }}
      >
        <img
          alt={this.props.alt}
          src={this.props.src}
          style={{
            display: 'block',
            maxWidth: '100%',
            width: '100%',
            height: 'auto',
            opacity: this.state.visibility ? 1 : 0.25,
            transition: 'opacity 500ms linear'
          }}
        />
      </VisibilitySensor>
    );
  }
}

export default VisibilitySensorImage;

该组件使用 react-visibility-sensor 提供的 VisibilitySensor 组件。当检测到 change 事件时，将执行检查以确定组件是否可见。

此代码使用三元运算符来确定是否将不透明度设置为 0.25 或 1。如果图像不在视口中，则应用 0.25 的不透明度。如果图像在视口中，则应用 1 的不透明度。

接下来，使用您创建的新组件来观察它的运行情况。

打开 App.js 文件并修改它以使用 VisibilitySensorImage：

src/App.js

import VisibilitySensorImage from './VisibilitySensorImage';

function App() {
  return (
    <div className="App">
      <h1>Astronomy</h1>
      {[
        'https://apod.nasa.gov/apod/image/2012/AntennaeGpotw1345a_1024.jpg',
        'https://apod.nasa.gov/apod/image/2012/Neyerm63_l1_1024.jpg',
        'https://apod.nasa.gov/apod/image/2012/2020Dec14TSE_Ribas_IMG_9291c1024.jpg',
        'https://apod.nasa.gov/apod/image/2012/ChristmasTree-ConeNebula-CumeadaObservatoryDSA-net1100.jpg',
        'https://apod.nasa.gov/apod/image/2012/EagleNebula_Paladini_960.jpg'
      ].map((imgpath) => <VisibilitySensorImage src={imgpath} alt="Astronomy Image"/>)}
    </div>
  );
}

export default App;

现在，当您运行 React 应用程序时，您应该会观察到屏幕上出现的图像。当您向下滚动屏幕时，图像的不透明度应该随着“淡入”视觉效果而改变。

但是，在此示例中，效果仅在窄屏幕上可见。如果图像大于视口，它们可能不会被检测为 isVisible。您可以使用自定义 React Visibility Sensor 可用的道具来满足您的需求。

第 3 步 — 自定义 React 能见度传感器

React Visibility Sensor 的文档包含许多用于自定义的道具。

partialVisibility 属性将有助于解决组件大于视口的问题。

重新访问 VisibilitySensorImage 并添加 partialVisibility：

src/VisibilitySensorImage.js

import React, { Component } from 'react';
import VisibilitySensor from 'react-visibility-sensor';

class VisibilitySensorImage extends Component {
  state = {
    visibility: false
  }

  render() {
    return (
      <VisibilitySensor
        partialVisibility
        onChange={(isVisible) => {
          this.setState({visibility: isVisible})
        }}
      >
        <img
          alt={this.props.alt}
          src={this.props.src}
          style={{
            display: 'block',
            maxWidth: '100%',
            width: '100%',
            height: 'auto',
            opacity: this.state.visibility ? 1 : 0.25,
            transition: 'opacity 500ms linear'
          }}
        />
      </VisibilitySensor>
    );
  }
}

export default VisibilitySensorImage;

现在，如果您滚动页面，当图像部分位于视口中时，不透明度会发生变化。

除了partialVisibility还有很多自定义道具：

限制滚动侦听器。
指定出现在视口中的最小像素数（默认值：当 partialVisibility 为 true 时，只有 1 个像素出现时元素被视为可见）。
调整浏览器窗口大小时收听。
或者如果您不再需要监听事件，则完全停用滚动监听器。

结论

在本教程中，您学习了如何使用 React Visibility Sensor 来检测您的 React 组件何时进入视口。

本教程中的示例涉及图像在进入和离开视口时淡入淡出。但也有其他用途的潜力：

可见时延迟加载图像。
显示“感谢您的光临！” 当用户滚动到您网站的页脚时的消息。
将自定义事件记录到 Google Analytics。
当用户滚动到博客文章的末尾时展开评论小部件。

如果您想了解有关 React 的更多信息，请查看我们的如何在 React.js 中编码，或查看我们的 React 主题页面以了解练习和编程项目。