如何使用 useState show/hide 点击移动导航栏？ React + TypeScript + Tailwind 项目

Question

作为主题，我尝试 show/hide 使用“useState”点击移动导航栏，但点击时菜单不显示。我该如何解决？

这是与此问题相关的实际代码。

  const [navbarOpen, setNavbarOpen] = useState(false)
  return (
   
      {/* mobile navbar */}
      <div className='cursor-pointer'>
        <div className='flex justify-between md:hidden px-8 py-4'>
          <div className='flex'>
            <button>
              <svg
                xmlns='http://www.w3.org/2000/svg'
                className='w-8 h-8 text-white p-2 bg-indigo-500 rounded-full flex self-center'
                viewBox='0 0 24 24'
                onClick={onClickHome}
              >
                <path d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'></path>
              </svg>
            </button>
            <span className='ml-3 text-md cursor-pointer' onClick={onClickHome}>
              Chat App
            </span>
          </div>
          <svg
            xmlns='http://www.w3.org/2000/svg'
          >
          </svg>
        </div>
       {/* collapsable navbar */}
        <div className={  navbarOpen ? ' flex' : ' hidden'}>
          <div
            onClick={onClickUserManagement}
            className='text-center block text-base hover:text-gray-900 mb-1'
          >
            User All
          </div>
          <div
            onClick={onClickSetting}
            className='text-center block text-base hover:text-gray-900 mb-1'
          >
            Setting
          </div>
          <div
            onClick={onClickSetting}
            className='text-center block text-base hover:text-gray-900 mb-1 pb-4'
          >
            Third Link
          </div>
        </div>
      </div>
    </header>
  )
})

Answer 1

这是我在评论区从 Zeke Hernandez 那里得到的答案。

className={'md:hidden'+ (navbarOpen ? ' flex' : ' hidden')}

此问题现已关闭。谢谢

如何使用 useState show/hide 点击移动导航栏？ React + TypeScript + Tailwind 项目

How can I show/hide mobile navbar on click using useState? React + TypeScript + Tailwind project

typescript

reactjs

tailwind-css