Блог

У меня есть бесконечная прокрутка с React.js

Это буквально бесконечно, поэтому я не могу измерить, сколько это.

 <div className="InfiniteScroll">
  <div ref={observer} className="item">item</div>
  <div ref={observer2} className="item">item</div>
  {/* Actually I am using map() */}
  {...}
</div>
  

Я могу добавить IntersectionObserver на любой div .

 const observer = new IntersectionObserver(() => { 
  console.log('Found it');
},{
  root: divRef.current,
  rootMargin: ...,
});
  

Когда я хочу узнать видимые в данный момент разделы, как я могу узнать это с помощью этого?

Добавление IntersectionObserver к каждому div выглядит неразумно.

Если я хочу вызвать какую-либо функцию с 1000-м div или случайным div, как я могу этого добиться?

вы можете установить любой div с помощью кода

 new IntersectionObserver(function(div) {
    div.isIntersecting amp;amp; do_something();
}).observe(div);
  

Я бы посоветовал вам прикрепить ссылку к самому последнему div. Итак, когда этот последний div пересекается, вы можете вызвать свою функцию там.

Прикрепление ссылки к последнему div

 {list.map((item, index) => {
    if (item.length === index   1) {
      return <div ref={lastItemElementRef} key={item}>{item}</div>
    } else {
      return <div key={item}>{item}</div>
    }
})}
  

Теперь, когда вы достигнете этого последнего div, вы можете вызвать внешний API для бесконечной прокрутки и вызвать некоторую функцию

Пересекающаяся логика

   const observer = useRef()
  const lastItemElementRef = useCallback(node => {
    if (loading) return
    if (observer.current) observer.current.disconnect()
    observer.current = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting) {
        // logic for triggering set state and API call - Infinite scroll
        // some other function invokation
      }
    })
    if (node) observer.current.observe(node)
  }, [loading, otherdependencies])