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。