条件渲染

用 && 和 ? : 切换显示与隐藏

要点

JSX 的 { } 里不能写 if，要改用 && 或 ? :
显示或不显示，用 &&：{isOpen && 内容}
A 和 B 二选一显示，用 ? :：{isLoggedIn ? 欢迎 : 请登录}

动手试试

import { useState } from "react"

export default function App() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div style={{ padding: 16 }}>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? "关闭" : "打开"}
      </button>
      {isOpen && <p>只有打开时才会显示这里</p>}
    </div>
  )
}

Open Sandbox

把展开时显示的文字增加到两行
只在收起时显示“已收起”（提示：!isOpen &&）
让它一开始就是展开的状态（提示：useState 的初始值）

常见错误

用数字作为 && 的条件，会显示出“0”

写 {count && …} 时，count 为 0 就会在页面上显示 0。数字要写成 {count > 0 && …}。

!isOpen 表示“isOpen 的相反值”

! 会把 true 和 false 互换。setIsOpen(!isOpen) 的意思是“变成和现在相反”，是切换展开 / 收起的标准写法。