Javascript 在父div而不是指定ref的视图中反应交叉点观察者

我有一个react应用程序，使用“机车滚动”和“react十字路口观察者”。

安装

组件具有带“机车滚动”的水平滚动。我想观看“.video gallery”和“.video box wrapper”div，以在屏幕上显示时制作一些动画（通过指定不同的类名）。videoGalleryInView正确地观看“.video gallery”，并执行我想要的动画。但这对boxInView不起作用，因为它应该监视所有的“.video box wrapper”节点。不仅所有“.video box wrapper”的动画同时发生，而且它似乎正在观看videoGalleryRef而不是boxRef。以下是相关代码。非常感谢您的帮助

import React, { useState, useRef, useEffect, useCallback } from "react";
import "../styles/Installation.css";
import LocomotiveScroll from 'locomotive-scroll';
import '../../node_modules/locomotive-scroll/src/locomotive-scroll.scss';
import { VideoModal } from './VideoModal';
import { useInView } from 'react-intersection-observer';

function Installation() {
  const [showModal, setShowModal] = useState(false);
  let openModal = () => {
    setShowModal(prev => !prev);
  }
  const installRef = useRef(null);
  const ref = useRef();

  const [videoGalleryInViewRef, videoGalleryInView] = useInView({
    threshold: 0.2
  });

  const [boxInViewRef, boxInView] = useInView({
    threshold: 0.1
  });

  const boxRef = useCallback(
    (node) => {
      ref.current = node;
      boxInViewRef(node);
      console.log('the node: ', node);
    },
    [boxInViewRef],
  );

  const videoGalleryRef = useCallback(
    (node) => {
      ref.current = node;
      videoGalleryInViewRef(node);
    },
    [videoGalleryInViewRef],
  );

  useEffect(() => {
    if(videoGalleryInView) {
      document.querySelector(".navbar-installation").classList.add('navbar-shrink');
    } else {
      document.querySelector(".navbar-installation").classList.remove('navbar-shrink');
    }

  },[videoGalleryInView]);

  useEffect(() => {
    window.scrollTo(0, 0);
    if(installRef){
      var scroll = new LocomotiveScroll({
        el: installRef.current,
        smooth: true,
        direction: "horizontal",
      })
    }
    return () => {
      scroll.destroy();
    }
  }, []);

  return (
    <>
      <VideoModal showModal = {showModal} setShowModal={setShowModal}/>
     
        <div className="installation-container" data-scroll-container ref={installRef} >
          <div className="installation-content">

            <div className="installation-bg" 
              data-scroll
              data-scroll-speed="-10"
              data-scroll-position="left">
            </div>

            <div className="video-instructions">
              <div className="video-instruction-text">
                Video Instructions
                <div className="video-instruction-subtext">
                  Adhesive mounting installation
                </div>
              </div>
            </div>            

            <div className="video-gallery" ref={videoGalleryRef}>
              <div className="video-box-wrapper" id="vid1" onClick={openModal} ref={boxRef}>
                <div className={boxInView ? "video-box reveal-vid" : "video-box hide-vid"}>
                  <img id="vid-thumbnail" src="./productphotos/bathroomcaddy-black.jpg" alt=""/>
                  <div className="product-name">Bathroom Shower Caddy</div>
                  <div className="watch-text">Watch</div>
                  <span className="box-color box-color1"></span>
                </div>
              </div>
              <div className="video-box-wrapper" id="vid2" ref={boxRef}>
                <div className={boxInView ? "video-box reveal-vid" : "video-box hide-vid"}>
                  <img id="vid-thumbnail" src="./productphotos/cornercaddy-black.jpg" alt=""/>
                  <div className="product-name">Bathroom Shower Caddy</div>
                  <div className="watch-text">Watch</div>
                  <span className="box-color box-color2"></span>
                </div>
              </div>   
            </div>
          </div>
        </div>
    </>
  );
}

export default Installation;

import React，{useState，useRef，useffect，useCallback}来自“React”；
导入“./styles/Installation.css”；
从“机车卷轴”导入机车卷轴；
导入“../../node_modules/mobile scroll/src/mobile scroll.scss”；
从“/VideoModal”导入{VideoModal}；
从“react intersection observer”导入{useInView}；
函数安装（）{
const[showmodel，setshowmodel]=useState（false）；
让OpenModel=（）=>{
设置显示模式（prev=>！prev）；
}
const installRef=useRef（null）；
const ref=useRef（）；
const[videoGalleryInView，videoGalleryInView]=useInView({
阈值：0.2
});
常量[boxInViewRef，boxInView]=useInView({
阈值：0.1
});
const boxRef=useCallback(
（节点）=>{
ref.current=节点；
boxInViewRef（节点）；
log（'节点：'，节点）；
},
[boxInViewRef]，
);
const videoGalleryRef=useCallback(
（节点）=>{
ref.current=节点；
videoGalleryInViewRef（节点）；
},
[videoGalleryInViewRef]，
);
useffect（（）=>{
if（视频画廊视图）{
document.querySelector（“.navbar安装”）.classList.add（'navbar-shrink'）；
}否则{
document.querySelector（“.navbar安装”）.classList.remove（'navbar-shrink'）；
}
}，[videoGalleryInView]）；
useffect（（）=>{
滚动到（0，0）；
如果（installRef）{
var scroll=新机车滚动({
el:installRef.current，
平滑：是的，
方向：“水平”，
})
}
return（）=>{
scroll.destroy（）；
}
}, []);
返回(
视频指令
胶粘安装
浴室淋浴盒
监视
浴室淋浴盒
监视
);
}
导出默认安装；