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

【问题标题】：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(() => {

  })

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案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>
  );
};

【讨论】：