Javascript 将裁判作为道具传球以获得越位

我有一个组件，我想获取ref并将其传递给另一个组件（固定到顶部导航栏，不透明度为0），以检查此ref的偏移量何时小于window.pageYOffset，如果小于window.pageYOffset，请更改我的状态并将导航栏的不透明度设置为1。问题是，当我传递ref时，其他组件将变为null，从而导致错误。当这个ref不为null时，我如何传递它

const galleryRef = useRef(null);

 <div className="gallery py-5 border" ref={galleryRef}>
      <FixedNavbar ref={galleryRef} />
</div>

const galleryRef=useRef（null）；

FixedNavBar.js

const handleFixedNavbar = () => {
    if (window.pageYOffset > ref.current.offsetTop) {
      setIsFixed(true);
    } else {
      setIsFixed(false);
    }
  };

 useEffect(() => {
    window.addEventListener('scroll', handleFixedNavbar);
    return () => {
      window.removeEventListener('scroll', handleFixedNavbar);
    };
  }, []);

<div ref={navMenusRef} className={`${isFixed ? 'fixed-nav' : ''}`}>
      {navMenus.map((item, index) => (
        <Link
          key={index}
          to={item.type}
          data-id={item.id}
        >
          {item.name}
        </Link>
      ))}
    </div>

const handleFixedNavbar=（）=>{
如果（window.pageYOffset>ref.current.offsetTop）{
setIsFixed（true）；
}否则{
setIsFixed（false）；
}
};
useffect（（）=>{
window.addEventListener（“滚动”，handleFixedNavbar）；
return（）=>{
window.removeEventListener（'scroll'，handleFixedNavbar）；
};
}, []);
{navMenus.map（（项目，索引）=>(
{item.name}
))}

您可以使用with

useState（）

在ref更新时重新渲染：

const [galleryRef, setGalleryRef] = useState(null);

 <div className="gallery py-5 border" ref={setGalleryRef}>
      <FixedNavbar galleryRef={galleryRef} />
</div>

---

这对我不起作用：（我认为问题是当ref还没有创建并且current总是空的时候，道具就被传递了，有没有办法只在ref已经创建的时候传递ref？参见更新的答案如果ref为空，参见Ori的条件渲染

useEffect(() => {
  if(!galleryRef) return; // do nothing when ref is not set
  
  const handleFixedNavbar = () => {
    setIsFixed(window.pageYOffset > galleryRef.offsetTop); // sets true or false according to condition
  };

  handleFixedNavbar(); initial set

  window.addEventListener('scroll', handleFixedNavbar);

  return () => {
    window.removeEventListener('scroll', handleFixedNavbar);
  };
}, [galleryRef]);