javascript - 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.