Как получить доступ к ссылке из несвязанного компонента?

Question

У меня есть фиксированная панель навигации, которую я хочу сделать статической, когда какое-то меню в приложении расширяется.
Проблема в том, что оба компонента находятся далеко друг от друга в иерархии приложений.

const Nav = () => {
  const navRef = useRef(null);
  return (
    <nav
      ref={navRef}
    ></nav>
  );
}

const Menu = () => {
  // I want to access the nav refhere to change its style when the menu expands
  return (
    <ul></ul>
  )
}

Answer 1

Вы можете сделать что-то вроде этого...

const App = () => {
  const navRef = useRef();

  const setStyleForNav = (style) => {
    navRef.current.style = style;  
  };

  return (
    <Nav ref={navRef}/>
    <Menu setStyleForNav={setStyleForNav}/>
  )
};

const Nav = React.forwardRef((props, ref) => {
  return (
    <nav
      ref={ref}
    ></nav>
  );
});

const Menu = ({setStyleForNav}) => {
  // I want to access the nav ref here to change its style when the menu expands
  return (
    <ul></ul>
  )
}