返回课程

条件渲染

编程代码 · React/Next.js

💡 React 条件渲染:三元表达式、&& 短路、空状态处理
return (// return 返回 JSX
  <div>// 外层 div 容器
    {isLoading ? <Spinner /> : <Content data={data} />}// 三元表达式:加载中显示 Spinner,否则显示内容
    {error && <p className="text-red-500">{error}</p>}// && 短路渲染:有 error 时才显示红色错误信息
    {items.length === 0 && <EmptyState />}// 数组为空时显示占位组件 EmptyState
  </div>// 关闭 div
);// 关闭 return 括号
0 字/分0% 准确
🐵
r左手食指
ESC 暂停 退格