跳到主要内容

条件渲染

如何根据条件返回不同的组件结构？​

  • 分支返回: 在组件函数中用普通 if 决定返回哪个 JSX，适合不同分支结构差别较大时;
  • 返回 null: 表示本次不输出 UI；组件仍被父树渲染时，其状态与 Effect 不会因此自动卸载;
function Notice({ hidden, error }) {
  if (hidden) return null;
  if (error) return <p role="alert">加载失败</p>;
  return <p>加载完成</p>;
}

如何在同一段结构中选择两种内容？​

  • 三元表达式: 用 condition ? a : b 替换变化部分，避免复制整个父结构;
  • 可读性边界: 多层三元难以阅读时改用变量或子组件，不把压缩代码行数当作目标;
function Item({ name, packed }) {
  return <li>{packed ? <del>{name}</del> : name}</li>;
}

如何只在条件成立时插入内容？​

  • 逻辑与: condition && <Badge /> 在条件为真时返回右侧元素，为假时返回左值;
  • 数字陷阱: 0 && <Badge /> 返回数字 0，React 会显示它；把数量判断写成 count > 0，而不是直接使用 count;
function Inbox({ count }) {
  return <h2>收件箱 {count > 0 && <span>{count}</span>}</h2>;
}

如何整理需要多步计算的条件内容？​

  • 变量赋值: 先准备默认 JSX，再在条件分支中替换，最后在共同结构中插入该变量;
  • 身份判断: 两段源码是否相同不决定状态是否保留，组件在树中的位置与类型才相关，见保留与重置 state;
let content = <span>未完成</span>;
if (packed) content = <strong>已完成</strong>;
const row = <li>{content}</li>;