如何将香草转换为反应钩子切换菜单
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>
);
;
【讨论】:
以上是关于如何将香草转换为反应钩子切换菜单的主要内容,如果未能解决你的问题,请参考以下文章
SetWinEventHook 事件钩子(有些windows事件并没有消息对应,譬如弹出菜单,切换窗口,获得焦点,滚动条滚动等)good