检查一个元素是否在视口中，但有映射的refs-ReactJS

Question

我想知道是否有人能帮忙。

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

类型错误：未能对"IntersectionObserver"执行"observe"：参数1的类型不是"Element">

任何帮助都将不胜感激。

非常感谢，代码如下。

Component.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>
)
})}
}

useIntersection.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

Answer 1

ref.current有一个引用集合

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

observe函数需要一个Element来观察，但代码调用整个引用

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

引用@backtick"是具有CCD_ 4属性的对象的阵列"；，正确的呼叫应该是类似的呼叫

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