React中点击Navbar内部按钮无法关闭导航栏的问题求助

你代码存在2个核心问题：

• 你给div绑定的isOpen是自定义属性，原生HTML元素不识别该属性，无法通过它控制元素显隐
• 你没有将showNav状态和导航栏的显隐逻辑做绑定，就算点击按钮更新了状态，界面也不会触发对应的变化

修复方案 #

提供两种常用实现方式，按需选择即可： #

方案1：条件渲染（点击后直接移除导航栏DOM）

直接在Navbar组件内部判断状态，为false时返回null不渲染组件，修改后的Navbar代码如下：

import React, { useState } from 'react';

export default function Navbar() {
    const [showNav, setShowNav] = useState(true)
    // 状态为false时直接不渲染组件
    if (!showNav) return null

  return (
    <div className="w-48 bg-gray-200 h-screen py-10">
        <button className="bg-primary w-32 h-12 rounded-lg text-white" onClick={() => setShowNav(false)}>Close Navbar</button>       
        <h1>Dashboard</h1>
        <h2>Menu item</h2>
        <h2>Menu item</h2>
        <h2>Menu item</h2>
    </div>
  )
}

方案2：动态样式控制（点击后仅隐藏，保留DOM节点）

通过动态拼接className的方式，状态为false时添加tailwind的hidden类实现隐藏，修改后的Navbar代码如下：

import React, { useState } from 'react';

export default function Navbar() {
    const [showNav, setShowNav] = useState(true)

  return (
    {/* 动态拼接显隐样式 */}
    <div className={`w-48 bg-gray-200 h-screen py-10 ${showNav ? '' : 'hidden'}`}>
        <button className="bg-primary w-32 h-12 rounded-lg text-white" onClick={() => setShowNav(false)}>Close Navbar</button>       
        <h1>Dashboard</h1>
        <h2>Menu item</h2>
        <h2>Menu item</h2>
        <h2>Menu item</h2>
    </div>
  )
}

如果后续不需要再次唤起导航栏选方案1即可，如果需要后续点击其他按钮再显示导航栏，两种都可以，方案2切换时性能略好。

内容的提问来源于stack exchange，提问作者LK10