reactjs - 您如何将 refs 与 map 函数和 Intersection Observer 一起使用？

Question

我正在尝试创建一个动画时间线，以与​​地图功能和交叉点观察器做出反应，以便时间线的每个部分按顺序加载。

我在使用裁判时遇到问题，因为我相信裁判只链接到地图上的最后一项？我环顾四周，似乎找不到任何东西。

这是我的代码：

import dataxp from '../Data/data-xp'
import TimelineItem from './TimelineItem'

function useOnScreen(options) {
  const ref = React.createRef()
  const [visible, setVisible] = React.useState(false);

  React.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]
}

function Timeline() { 
  const [ref, visible] = useOnScreen({rootMargin: '-500px'})

  return (
  dataxp.length > 0 &&  (
    <div className='timeline-container'>
      <div className='title-container'>
        <h1 className='xp-title'>EXPERIENCE</h1>
      </div>
        {visible ? (dataxp.map((data, i) => (
          <TimelineItem data={data} key={i}  ref={ref}/> 
          )
        )) : (
          <div style={{minHeight: '30px'}}></div>)}
      <div className='circle-container'>
        <div className='end-circle'> </div>
      </div>
    </div>
    )
  )
}


export default Timeline

标签： reactjsmappingrefintersection-observer