Reactjs 中的交叉点观察器

Question

Can someone help me how can I do this in Reactjs?

Can I iterate one IntersectionObserver for multiple child in reactjs

 const faders = document.querySelectorAll('.fade-in'); const appearOptions = { threshold: 1 }; const appearOnScroll = new IntersectionObserver( function(entries, appearOnScroll){ entries.forEach(entry => { if(!entry.isIntersecting){ return; }else{ entry.target.classList.add('appear') appearOnScroll.unobserve(entry.target) } }) }, appearOptions); faders.forEach(fader =>{ appearOnScroll.observe(fader) })

Answer 1

useIntersectionObserver.js

Use this custom hook. It creates an IntersectionObserver instance and saves it in a useRef hook. It tracks the elements that are being observed in a state. Whenever the state changes, it unobserves all elements and then reobserves the elements that remain in the state.

The advantages of creating a custom hook is that you can reuse the hook and implement it on multiple occasions.

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

const useIntersectionObserver = ({ root = null, rootMargin = '0px', threshold = 0 }) => {
  const [entries, setEntries] = useState([]);
  const [observedNodes, setObservedNodes] = useState([]);
  const observer = useRef(null);

  useEffect(() => {
    if (observer.current) {
      observer.current.disconnect();
    }

    observer.current = new IntersectionObserver(entries => setEntries(entries), {
      root,
      rootMargin,
      threshold
    });

    const { current: currentObserver } = observer;

    for (const node of observedNodes) {
      currentObserver.observe(node);
    }

    return () => currentObserver.disconnect();
  }, [observedNodes, root, rootMargin, threshold]);


  return [entries, setObservedNodes];
};

export default useIntersectionObserver;

app.js

Use the hook where you need to observe your elements. Create references to the elements that you need to observe and pass them to the hook after the first render.

The entries state will contain an array of IntersectionObserverEntry objects. Loop over it whenever the entries state changes and assert your logic, like adding a class.

import { useRef, useEffect } from 'react';
import useIntersectionObserver from './useIntersectionObserver';

function App() {
  const targets = useRef(new Set());

  const [entries, setObservedNodes] = useIntersectionObserver({
    threshold: 1
  });

  useEffect(() => {
    setObservedNodes(() => ([...targets.current]));
  }, [setObservedNodes]);

  useEffect(() => {
    for (const entry of entries) {
      if (entry.isIntersecting) {
        entry.target.classList.add('appear');

        setObservedNodes(observedNodes => 
          observedNodes.filter(node => node !== entry.target)
        );
      }
    }
  }, [entries, setObservedNodes]);

  return (
    <>
      <div className="fade-in" ref={element => targets.current.add(element)}></div>
      <div className="fade-in" ref={element => targets.current.add(element)}></div>
    </>
  )
}