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

Posted

技术标签:

【中文标题】如何将香草转换为反应钩子切换菜单【英文标题】: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>
  );
;

【讨论】:

以上是关于如何将香草转换为反应钩子切换菜单的主要内容,如果未能解决你的问题,请参考以下文章

使用反应钩子切换组件 onclick

SetWinEventHook 事件钩子(有些windows事件并没有消息对应,譬如弹出菜单,切换窗口,获得焦点,滚动条滚动等)good

如何使用香草 javascript 中的一个切换按钮调用 2 个不同的函数

切换香草风格

如何在 DBeaver 中切换大写字符转换?

如何测试/模拟反应钩子?