条件渲染与列表

这一课你将能做到

1. 用三元、&&、提前 return 切换界面
2. 用 map 渲染列表并写好 key
3. 避开 0 && <Component /> 把 0 显示出来的坑

为什么要学

未登录显示「登录」；已登录显示名字。
课时列表有数据就展示行，没数据就显示「暂无站点」。

这些都是条件渲染和列表渲染。人话：根据数据决定「画什么、画几份」。
本站 /learn、课程目录、刷题列表全是「空态 + map」组合。不会这个，页面要么假空白，要么一套 HTML 复制十二遍。

先建立图像

{user ? <Profile user={user} /> : <LoginLink />}
{items.length === 0 && <p>暂无站点</p>}
{items.map((x) => <Card key={x.id} title={x.title} />)}

三件事：二选一、有则显示、重复生成。

跟着做

步骤 1：提前 return（最好读）

function Header({ user }) {
  if (!user) {
    return <a href="/login">登录</a>;
  }
  return <span>你好，{user.name}</span>;
}

先处理「没有」的情况，后面的 JSX 假设数据已经齐了。加载中也可以：if (loading) return <p>加载中…</p>。

步骤 2：三元（真正的二选一）

<button type="button">{saving ? "保存中…" : "离开本站"}</button>

适合短文案。JSX 很长时拆成变量或提前 return，别套三层三元。

步骤 3：&& 的数字坑（必背）

const count = 0;
return (
  <div>
    {count && <p>有 {count} 条</p>}
    {/* 会渲染出 0！因为 0 是假值，但 React 仍会把 0 当孩子显示出来 */}
  </div>
);

更稳：

{count > 0 && <p>有 {count} 条</p>}
// 或
{count ? <p>有 {count} 条</p> : null}

空字符串 "" && ... 也可能画出空白异常。左侧用真正的布尔值（length === 0、count > 0）。

步骤 4：列表 + 空态（一套完整）

function LessonList({ lessons }) {
  if (!lessons || lessons.length === 0) {
    return <p>暂无课程</p>;
  }
  return (
    <ul>
      {lessons.map((l) => (
        <li key={l.id}>
          {l.title} {l.done ? "✓" : ""}
        </li>
      ))}
    </ul>
  );
}

key 用业务 id；不要用 Math.random()（每次渲染都变，React 会以为全是新项）。
会插入/删除/排序时不要用下标当 key：中间插一项，后面项的下标全变，输入框焦点会「跳」到别人身上。

步骤 5：列表里再套条件

{lessons.map((l) => (
  <li key={l.id} hidden={!l.visible}>
    {l.title}
  </li>
))}

更常见是 filter 再 map：先 ，空了再走空态。