组件之间的useRef答案

【问题标题】：useRef between components组件之间的useRef
【发布时间】：2022-11-21 08:23:30
【问题描述】：

我有两个组件：<Header/>，上面有汉堡包按钮，以及<Sidebar/>。

这个想法是：如果我点击汉堡包按钮，侧边栏应该被删除，或者如果我点击返回，它应该出现。

在我使用 useRef 的一个组件中这样做没有问题：

  const sideBarRef = useRef()
  
  function toogleSideBar() {
    sideBarRef.current.classList.toggle('-translate-x-full')
  }

但我不确定如何在组件之间执行此操作，其中我有一个带有 <Header/> 和 <Sidebar/> 的布局，我需要在 <Header/> 中启动 toogleSidebar() 以及如何在 @987654329 中传递 ref={sideBarRef} @.

【问题讨论】：

标签： reactjs react-hooks next.js

【解决方案1】：

与 React 的大多数情况一样，不需要使用 ref。更好的方法是将状态提升到父组件并有条件地渲染侧边栏。父组件是同时呈现Header 和Sidebar 的组件，我们称它为App。

在您的 App 组件中：

const App = () => {
  const [showSidebar, setShowSidebar] = useState(true);

  const toggleSidebar = () => setShowSidebar(prev => !prev);
  
  return (
    <main>
      <Header onClickMenu={toggleSidebar} />
      {showSidebar && <Sidebar />}
    </main>
  );
};

然后在您的标题中：

const Header = ({ onClickMenu }) => {  
  return (
    <nav>
      <Hamburger onClick={onClickMenu} />
      ...
    </nav>
  );
};

【讨论】：

【解决方案2】：

您可以像变量一样通过代码传递状态

在 App.js 中声明

    //App.js
    let sideBarRef = useRef(false); 

    let content = (
        {sideBarRef? (<SideBar sideBarRef ={sideBarRef} />
                      ): null} 
        <Header sideBarRef ={sideBarRef} />
          


export default function SideBar({sideBarRef,}) {   
<use sideBarRef in code as if declare here>
}

export default function Header({sideBarRef,}) {   
<use sideBarRef as if declare here >
}

【讨论】：

你可能需要强制重新渲染，然后设置为 useState 在组件之间传递状态的原则与 app.js 中的状态相同并传递给其他组件，