无法在反应中出现带有 Onclick 事件的侧边栏

亚当琼斯

我是一名初级软件开发人员,我试图在单击汉堡菜单时显示侧边栏。我编写了一个函数,可以在真假之间切换我的状态,但没有任何反应。请帮忙!!下面是我的代码:

const [isExpanded, setIsExpanded] = useState(true)

const toggleSideNav = () => {
    setIsExpanded(!isExpanded)
    console.log(isExpanded)
    
if (isExpanded == false) {
         return <Fragment />
     } else {
         return <SideBar />
     }

useEffect(() => {
    toggleSideNav()
}, [])

}

<button onClick={toggleSideNav}>
  <FontAwesomeIcon icon={faBars} />
</button>

当我单击按钮时,状态按预期切换,但没有其他任何反应。

我认为,如果您像这样返回 Fragment/Sidebar,一旦 isExpanded 为真,您将无法呈现切换按钮。你可能想做这样的事情。

const [isExpanded, setIsExpanded] = useState(true)

const toggleSideNav = () => {
    setIsExpanded(prev => !prev)
}

return{
<Fragment>
  {isExpanded && <SideBar />}
  <button onClick={toggleSideNav}>
    <FontAwesomeIcon icon={faBars} />
  </button>
</Fragment>
} 

通过这样做,侧边栏将仅在 isExpanded 为真时显示,并且切换按钮将仍然存在以再次关闭侧边栏

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章