介绍

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

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

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

先决条件

要完成本教程，您需要：

• Node.js 的本地开发环境。遵循如何安装 Node.js 并创建本地开发环境。

本教程已通过 Node v15.3.0、npmv6.14.9、reactv17.0.1 和v5.1.1验证react-visibibilty-sensor。

步骤 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使用文本编辑器创建一个新文件：

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;

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

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

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

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

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：

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 的更多信息，请查看我们的How To Code in React.js系列，或查看我们的 React 主题页面以获取练习和编程项目。