IntersectionObserver 未在 React 中更新

Question

以下代码将在元素通过滚动进入或离开视口时立即触发状态更改

const dialog = useRef(),
[visible, set] = useState(false)

useEffect(() => {
        const observer = new IntersectionObserver((e) => {
            set(e[0].isIntersecting ? true : false)
        }, {root: null, rootMargin: '0px', threshold: 0})
        observer.observe(dialog.current)
        return () => observer.disconnect()
    }, [dialog.current])

return <div ref={dialog}>my dialog</div>

但如果我尝试这样的事情

const observer = new IntersectionObserver((e) => {
            set(e[0].boundingClientRect.y <= 0 ? true : false)
        }, {root: null, rootMargin: '0px', threshold: 0})

仅当触发重新渲染时，状态才会更新，而我希望它在滚动视口时触发，基于观察到的元素的 boundingClientRect.y 值。 我发现完成这项工作的唯一方法是在useEffect 中使用window.onscroll 事件并将观察者放入其中，但它对我来说看起来不太好。有没有比使用window.onscroll 不同（更好）的方法？

Answer 1

这与 IntersectionObserver 在 useEffect 挂钩中实例化时未完全加载的 DOM 内容有关。

不使用window.onscroll 的一种解决方法是在组件中运行钩子并将您的设置器作为道具传递。

类似的东西

function MyObserver({ selector, callback }){
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => callback(entries),
      { root: null, rootMargin: '0px', threshold: 0 });

    const element = document.querySelector(selector);

    observer.observe(element);

    return () => {
      observer.disconnect();
    };
      
  }, []);


  return null;
}

function Main() {
  [visible, set] = useState(false);

  return <>
    <div className="myDialog">my dialog</div>
    <MyObserver selector=".myDialog"
      callback={ (e) => { set(e[0].isIntersecting ? true : false); } } />
  </>;
}

现在观察者逻辑是渲染流程的一部分，发生在对话之后，所以它应该正确更新。

当我遇到这个确切的问题时，这对我有用。