javascript - IntersectionObserverAPI 当所有元素都不可见时返回默认状态

Question

我正在使用 React Hook 来检测元素何时在视口(viewport)中可见。在那之前，一切正常，但我需要在隐藏所有内容(例如到达页脚或页眉)时“重置”状态。

这是我的钩子(Hook):

import { useState, useEffect, useRef } from 'react'

const useIntersect = (ref) => {
  const [isOnScreen, setIsOnScreen] = useState(false)
  const observerRef = useRef(null)

  useEffect(() => {
    observerRef.current = new IntersectionObserver(([entry]) => {
      setIsOnScreen(entry.isIntersecting)
    })
  }, [])

  useEffect(() => {
    observerRef.current.observe(ref.current)
    return () => observerRef.current.disconnect()
  }, [ref])

  return isOnScreen
}

export default useIntersect

这是我正在更新的状态:

  const elementRef = useRef(null)
  const[state, setState] = useState('nothing is visible')
  const onScreen = useIntersect(elementRef)

  useEffect(() => {
    return onScreen ? setState('an item is visible') : null
  })

  return (
    <Item ref={elementRef}>
      ...
    </Item>
  )

当所有元素都离开视口(viewport)时(当不满足 onScreen 条件时)，我需要能够对某些东西(比如字符串)说 setState('...')但即使当我到达页脚时什么也看不到，它也会将最后一项保留在内存中。

我试过很多东西，但我想不出出路:(

感谢您的帮助!

Answer 1

我相信你的 useIntersect 钩子(Hook)应该为第二个 useEffect ref.current 的依赖而不是 ref

所以

useEffect(() => {
  observerRef.current.observe(ref.current)
  return () => observerRef.current.disconnect()
}, [ref.current]);

然后在组件中使用它的时候做

useEffect(() => {
  return onScreen ? setState('an item is visible') : setState('nothing is visible');
}, [onScreen])

您应该添加对 onScreen 的依赖，以便它仅在 onScreen 更改时更新，最后您应该调用 setState当 onScreen 为您想要的值时的场景。