如何在路口正确设置观察者答案

【问题标题】：how to correctly set the observer at the intersection如何在路口正确设置观察者
【发布时间】：2021-06-19 03:04:43
【问题描述】：

如何正确设置交叉点观察者。当我要求 img 它只适用于最后一个元素，如何为每个元素设置？让它们依次加载

function useOnScreen(options:any){
  const ref:any = React.useRef()
  const[visible, setVisible] = React.useState(false)
useEffect(()=>{
  const observer = new IntersectionObserver(([entry])=>{
  setVisible(entry.isIntersecting)
}, options)

  if(ref.current){
    observer.observe(ref.current)
  }

  return ()=>{
      if (ref.current){
        observer.unobserve(ref.current)
      }
    } 
  },  [ref, options]) 
  return [ref, visible]
}
const [ref, visible] = useOnScreen({threshold: '0.68'})
console.log(visible,ref)
const data:any = state.data.map((item:any) => {
return (<SectionHome key={item.id}>
      <picture >
          <img src={item.pictures} alt={item.show_name} key={item.pictures}/>
      </picture>
      <a href={item.show_name} key={item.show_name}><p key={item.id}>{item.show_name}</p></a>
  </SectionHome>)
})
const data2:any = state.data.map((item:any) => {
  return (
    <div>
      <a href={item.show_name} key={item.show_name}>
        <picture ref={ref}>
        {visible ? <img src={item.pictures} alt={item.show_name} key={item.pictures}/> : <section></section>}
        </picture>
      <p key={item.id}>{item.show_name}</p></a>
    </div>  )
  })

【问题讨论】：

标签： javascript reactjs intersection-observer

【解决方案1】：

您可以创建一个新的 React 组件来保存每个图片元素的交集观察器逻辑。

// This function hook is the same.
function useOnScreen(options: any) {
  const ref: any = React.useRef()
  const [visible, setVisible] = React.useState(false)
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setVisible(entry.isIntersecting)
    }, options)

    if (ref.current) {
      observer.observe(ref.current)
    }

    return () => {
      if (ref.current) {
        observer.unobserve(ref.current)
      }
    }
  }, [ref, options])
  return [ref, visible]
}

// This component holds the intersection observer logic and forwards all the props to the picture element.
// It accepts a function as children and the function is given whether it is visible and should return the content to render inside the picture element.
function SmartPicture(props: any) {
  const { children, ...pictureProps } = props

  const [ref, visible] = useOnScreen({ threshold: '0.68' })

  return (
    <picture {...pictureProps} ref={ref}>
      {children(visible)}
    </picture>
  )
}

// In your render function
const data: any = state.data.map((item: any) => {
  return (
    <SectionHome key={item.id}>
      <picture >
        <img src={item.pictures} alt={item.show_name} key={item.pictures} />
      </picture>
      <a href={item.show_name} key={item.show_name}><p key={item.id}>{item.show_name}</p></a>
    </SectionHome>
  )
})

const data2: any = state.data.map((item: any) => {
  return (
    <div>
      <a href={item.show_name} key={item.show_name}>
        <SmartPicture>
          {(visible) => visible ? <img src={item.pictures} alt={item.show_name} key={item.pictures} /> : <section></section>}
        </SmartPicture>
        <p key={item.id}>{item.show_name}</p></a>
    </div>
  )
})

【讨论】：