时间戳

首页 > 解决方案 > 检查元素是否在视口中但具有映射的参考 - ReactJS

reactjs - 检查元素是否在视口中但具有映射的参考 - ReactJS

问题描述

我想知道是否有人可以提供帮助。

我一直在研究很多解决方案来检查元素何时显示在视点中，目前正在尝试将此方法集成到我的项目中 - https://www.webtips.dev/webtips/react-hooks/element-in- viewport，此方法使用 refs 但是我希望在页面上拥有的内容不是静态的，而是映射的。我发现这种方法可以动态使用 refs - https://dev.to/nicm42/react-refs-in-a-loop-1jk4但是我认为我做错了，因为我收到以下错误：

TypeError：无法在“IntersectionObserver”上执行“观察”：参数 1 不是“元素”类型。

任何帮助都非常感谢。

非常感谢，代码如下。

组件.js

import { useRef, createRef } from 'react'
import useIntersection from './useIntersection.js'

const MyComponent = ({ someStateData }) => {

    const ref= useRef([]);
    ref.current = someStateData.map((title, i) => ref.current[i] ?? createRef());

    const inViewport = useIntersection(ref, '0px');

    if (inViewport) {
        console.log('in viewport:', ref.current);
    }

    {someStateData.map((title, i) => {
        return (
            <div key={title.id} id={title.id} ref={ref.current[i]}>
                {{ title.id }}
            </div>
        )
    })}

}

使用Intersection.js

import { useState, useEffect } from 'react'

const useIntersection = (element, rootMargin) => {
    const [isVisible, setState] = useState(false);

    useEffect(() => {
        const observer = new IntersectionObserver(
            ([entry]) => {
                setState(entry.isIntersecting);
            }, { rootMargin }
        );

        element && observer.observe(element);

        return () => observer.unobserve(element);
    }, []);

    return isVisible;
};

export default useIntersection

标签： reactjsintersection-observeruse-refreact-intersection-observer

解决方案

ref.current有一组参考

const ref= useRef([]);
ref.current = someStateData.map((title, i) => ref.current[i] ?? createRef());

该observe函数需要Element观察，但代码调用整个 ref

const inViewport = useIntersection(ref, '0px');
const useIntersection = (element, rootMargin) => {
    ...
    ...
observer.observe(element);

引用@backtick“是一个具有属性的对象数组current”，正确的调用应该是这样的

observer.observe(ref.current[i].current)

推荐阅读