Javascript 满足交叉点条件时，IntersectionObserver不执行功能

我正在尝试使用IntersectionObserver和React。我想做的是当一个div的底部25%进入视图时，让一个函数运行

我创建了一个createObserver函数，并将其包装在一个useEffect中，这样在组件挂载之前，交叉点观察者不会将值分配给target或root

useEffect(() => {
    createObserver();
  }, []);

然后我创建了交叉点观察者函数，给它一个要监视的目标和一个根来比较目标

const createObserver = () => {
    let options = {
      root: document.querySelector('.home'),
      rootMargin: '0px',
      threshold: 0.75
    }

    let target = document.querySelector("#align");

    let observer = new IntersectionObserver(() => {
        alert('helloWorld');
    }, options);

    observer.observe(target);
  }

理想的结果是，当id为align的div的底部75%进入视图时，函数应该向helloWorld发出警报。相反，它会在组件装载DOM时立即通知helloWorld，就这样

这里有一个最小的可重复性示例，以备您自己测试：

const Home = () => {
   const createObserver = () => {
    let options = {
      root: document.querySelector('.home'),
      rootMargin: '0px',
      threshold: 0.75
    }
    let target = document.querySelector("#align");
    let observer = new IntersectionObserver(() => {
     alert('helloWorld')
    }, options);
    observer.observe(target);
  }

  useEffect(() => {
    createObserver();
  }, []);  

  return (
    <div className="home  col-sm-12">
      <div className="row" id="align"></div>
    </div>
  );
};

const Home=（）=>{
常量createObserver=（）=>{
让选项={
root:document.querySelector（'.home'），
rootMargin:'0px'，
阈值：0.75
}
让target=document.querySelector（“#align”）；
让观察者=新的相交观察者（（）=>{
警报（'helloWorld'）
}，选项）；
观察者。观察（目标）；
}
useffect（（）=>{
createObserver（）；
}, []);  
返回(
);
};

根据这个问题，显然当您实例化

IntersectionObserver

时，将触发回调。