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

Question

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

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

const Menu = () => {
  // I want to access the nav ref here 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>
  )
}