javascript - Next.js切换div标签的显示

码

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。

最佳答案

showMe必须是一个状态变量，以便当showMe更改时，React知道重新渲染组件。我读过这篇文章：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。