Intersection Observer React 为什么我的代码不起作用？答案

【问题标题】：Intersection Observer React Why is my code not working?Intersection Observer React 为什么我的代码不起作用？
【发布时间】：2021-12-28 12:42:59
【问题描述】：

我想为我使用 React 创建的项目创建一个“Intersection Observer”。根据我在互联网上的研究，我认为我正确地遵循了所有说明。但是我的代码不起作用，我不明白错误在哪里。你能帮帮我吗？

我的 react 项目代码；

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;

我得到的错误是；

enter image description here

【问题讨论】：

标签： javascript reactjs react-native react-hooks intersection-observer

【解决方案1】：

您必须将containerRef 附加到您要观察的 DOM 元素上，例如：

<div ref={containerRef}>foo</div>

【讨论】：

我是这样添加的，但没有任何改变； ``` return (

); } 导出默认应用程序； ```
你也没有导入 React：import React from "react'
我也这样做了，但错误仍然存在:(
@Sr.Developer，请向codesandbox.io等平台添加最少的复制

【解决方案2】：

@krirkrirk

我是这样添加的，但没有任何改变；

  return (
    <div ref={containerRef} className="App">
         <Header />
          <HeroImage  />
          <Hakkimizda  />
          <UrunGalerisi />
          <Sss />
          <Footer  />
    </div>
  );
}

export default App;

【讨论】：