在React中点击关闭菜单

Question

我的目标：在Navbar内部点击按钮后关闭Navbar。

我似乎无法让它正常工作 - 如果有人能够向我解释我做错了什么，那将非常好！

这是我的Navbar：

import React, { useState } from 'react';

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


  return (
    <div isOpen={showNav} 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>
  )
}

这是我的App.js文件

import './App.css';
import Navbar from './components/Navbar';

function App() {

  return (
    <div className="flex">
      <Navbar />
    </div>
  );
}
export default App;

- LK10

Answer 1

To achieve what you need, you can also use the condition like this:

return (
<>
  {showNav && <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>
   }
</>)

- Snehasish Karmakar

Answer 2

在 div 中没有 isOpen 属性。

如果你想要“隐藏”元素而不是不渲染它

如果 showNav 为 false，在样式中将 display 设置为 none。像这样：

import React, { useState } from 'react';

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


  return (
    <div style={{display: showNav ? 'initial' : 'none'}} 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>
  )
}

或者使用其他方式来隐藏元素（例如使用visibility），可以参考此处介绍的在CSS中隐藏元素的方法。

如果您不想渲染它

请使用Snehasish Karmakar的答案。

- Raz Luvaton

Answer 3

const [showNav, setShowNav] = useState("block");

改为

const [showNav, setShowNav] = useState("block");

onClick={() => setShowNav(false)} 改为 onClick={() => setShowNav("hidden")};

- Muhammed Sabeeh

---

你不应该这样做，因为你强制使用实现细节（特定的隐藏元素方式）。 - Raz Luvaton

实际上，是的。条件加载更好。这是与他的问题最接近的答案，因为他想用样式隐藏它。 - Muhammed Sabeeh

我同意，但我的意思是不要将“状态值”设置为实现细节。 - Raz Luvaton