Next.js 切换显示 div 标签

Question

代码

export default function Header(){
  let showMe = false;
  function toggle(){
    showMe = !showMe;
  }
  return (
    <>
      <button onClick={toggle}>Toggle Subjects</button>
      {/*The bottom code should toggle on and off when the button is pressed*/}
      <div style={{
        display: showMe?"block":"none"
      }}>
        This should toggle my display
      </div>
    </>
  );
}

---

期待

该div标签应可以切换可见性（例如，如果我在按钮上点击一次，div标签应该显示出来，如果我再次点击它会被隐藏，等等）。

---

现实

看起来变量showMe发生了变化，但是div标签没有跟随更新并保持隐藏状态。

注意：如果有任何改变，我将使用 next.js。

Answer 1

showMe需要是一个状态变量，以便 React 知道在showMe更改时重新渲染组件。我会读这个：https : //reactjs.org/docs/hooks-state.html

下面的代码应该可以工作（注意如何showMe替换为对 的调用useState）。

export default function Header(){
  const [showMe, setShowMe] = useState(false);
  function toggle(){
    setShowMe(!showMe);
  }
  return (
    <>
      <button onClick={toggle}>Toggle Subjects</button>
      {/*The bottom code should toggle on and off when the button is pressed*/}
      <div style={{
        display: showMe?"block":"none"
      }}>
        This should toggle my display
      </div>
    </>
  );
}

括号表示法const [showMe, setShowMe] = useState(false);是数组解构：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

useState返回一个长度为 2 的数组。使用数组解构，我们将返回数组的第一个元素设置为 ，将返回数组showMe的第二个元素设置为setShowMe。