react-visibility-sensor 多个div进入视图不同次数示例

React-Visibility-Sensor 是一个 React 组件，用于检测元素进入和离开视图。如果你有多个 div 需要检测进入视图的次数，可以使用 map 函数将它们映射到 VisibilitySensor 组件中。

例如，假设你有以下 div 列表：

const divList = [
  { id: 1, content: "Div 1" },
  { id: 2, content: "Div 2" },
  { id: 3, content: "Div 3" },
  { id: 4, content: "Div 4" },
];

你可以将它们映射到 VisibilitySensor 组件中，代码如下：

import React, { useState } from "react";
import VisibilitySensor from "react-visibility-sensor";

const DivList = () => {
  const [visibility, setVisibility] = useState({});

  const onChange = (isVisible, id) => {
    setVisibility((prevState) => ({
      ...prevState,
      [id]: isVisible ? (prevState[id] || 0) + 1 : prevState[id],
    }));
  };

  return (
    <div>
      {divList.map((div) => (
        <VisibilitySensor
          key={div.id}
          onChange={(isVisible) => onChange(isVisible, div.id)}
        >
          <div>
            <h2>{div.content}</h2>
            <p>
              {visibility[div.id]
                ? `Div ${div.id} 进入视图次数: ${visibility[div.id]}`
                : "Div 还未进入视图"}
            </p>
          </div>
        </VisibilitySensor>
      ))}
    </div>
  );
};

export default DivList;

在这个例子中，我们使用 useState 来保存每个 div 进入视图的次数，并将它们渲染为文本。每个 VisibilitySensor 组件都有一个 onChange 回调函数，它会在元素进入或离开视图时被调用。我们使用 onChange 回调函数来更新状态，以便记录每个 div 进入视图的次数。最后，我们将 div 映射到 VisibilitySensor 组件中，并在每个 div 下面渲染进入视图的次数。