如何将香草转换为反应钩子切换菜单

Posted 2023-02-21

【中文标题】如何将香草转换为反应钩子切换菜单

【英文标题】：How to convert vanilla to react hook toggle menu

【发布时间】：2022-01-23 17:54:44

【问题描述】：

我正在尝试使用 bootstrap 从 vanilla js 获取代码并使用 react hooks。我在 youtube 上观看了一些关于 useState 和 useReff 的视频，但是，当我尝试将它们应用到我的项目中时，这些概念仍然有点混乱。

我正在尝试将原版中的切换功能转换为反应钩子。您能否指导我如何开始考虑更改此代码？

提前致谢。

原版：

window.addEventListener("DOMContentLoaded", (event) => 
  // Toggle the side navigation
  const sidebarToggle = document.body.querySelector("#sidebarToggle");

  if (sidebarToggle) 
    if (localStorage.getItem('sb|sidebar-toggle') === 'true') 
        document.body.classList.toggle('sb-sidenav-toggled');
    
    sidebarToggle.addEventListener("click", (event) => 
      event.preventDefault();
      document.body.classList.toggle("sb-sidenav-toggled");
      localStorage.setItem(
        "sb|sidebar-toggle",
        document.body.classList.contains("sb-sidenav-toggled")
      );
    );
  
);

反应：

const [inactive, setInactive] = useState(false);

  useEffect(() => 

  )

【参考方案1】：

useEffect 在组件绘制后触发，因此无需调用 DOMContentLoaded 事件监听器

const Component = (e) => 
     const [inactive, setInactive] = useState(false);
     
     useEffect(() => 
          // insert code here
     , [inactive]);
 

【参考方案2】：

你可以这样做：

import  useState, React  from 'react';

const YourComponent = () => 
  
  // isSidebarOpen: value, setIsSidebarOpen: setter, false by default.
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  
  const toggleSideBar = () => 
    // true -> false / false -> true
    setIsSidebarOpen(!isSidebarOpen);
  
  
  return (
    <YourButton onClick=toggleSideBar>
      Text
    </YourButton>
  );
;