[英]Intersection Observer React Why is my code not working?
I want to make an "Intersection Observer" for my project that I created with React.我想为我用 React 创建的项目创建一个“Intersection Observer”。 From what I've researched on the internet, I think I followed all the instructions correctly.
根据我在互联网上的研究,我认为我正确地遵循了所有说明。 But my code doesn't work, I don't understand where is the error.
但是我的代码不起作用,我不明白错误在哪里。 Can you help me please?
你能帮我吗?
My react project code;我的反应项目代码;
import './App.css';
import Header from './components/Header'
import HeroImage from './components/HeroImage'
import Hakkimizda from './components/Hakkimizda'
import UrunGalerisi from './components/UrunGalerisi'
import Sss from './components/sss'
import Footer from './components/Footer'
import { useRef, useState, useEffect } from 'react';
function App() {
//Variables
const containerRef = useRef(null);
const [isVisible, setIsvisible] = useState(false);
//callbackFunction
const callBackFunction = (entries)=>{
const [entry] = entries;
setIsvisible(entry.isIntersecting);
}
//Options
const options = {
root:'null',
rootMargin:'0px',
treshold:1.0
}
//useEffect
useEffect(()=>{
const observer = new IntersectionObserver(callBackFunction, options)
if(containerRef.current) observer.observe(containerRef.current)
return ()=>{ if(containerRef.current) observer.unobserve(containerRef.current) }
}, [containerRef, options])
return (
<div className="App">
<Header />
<HeroImage />
<Hakkimizda />
<UrunGalerisi />
<Sss />
<Footer />
</div>
);
}
export default App;
the error I get is;我得到的错误是;
You have to attach the containerRef
to the DOM element you want to observe, with something like:您必须将
containerRef
附加到要观察的 DOM 元素上,例如:
<div ref={containerRef}>foo</div>
@krirkrirk @krirkrirk
I added like this but nothing changed;我像这样添加但没有任何改变;
return (
<div ref={containerRef} className="App">
<Header />
<HeroImage />
<Hakkimizda />
<UrunGalerisi />
<Sss />
<Footer />
</div>
);
}
export default App;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.