JSX 与表达式

学习目标

这一课解决「界面描述怎么写」的问题：JSX 里花括号能放什么、不能放什么，属性和 HTML 差在哪，条件与列表怎么组织。读完你能独立写出一段带表达式、条件和短列表的 JSX，并能定位常见的语法错误。

问题场景

你要渲染一张课程摘要卡片：标题要大写展示，标签数量随数据变化，完结的课要显示「已完结」徽标。第一版代码写成了这样：

<div class="card" style="border: 1px solid #ddd">
  <h3>{if (course.done) course.title.toUpperCase()}</h3>
  <p>{course.tags.map(tag => <span>{tag}</span>)}</p>
</div>

两个 class 和 style 的写法是从 HTML 抄来的，直接报错；花括号里的 if 也编译不过。这些错误的根源是同一个：JSX 不是 HTML，它是 JavaScript 的扩展。

核心解释

JSX 的规则可以浓缩成三句：

一、属性是 JavaScript，不是字符串粘贴。 class 变成 className（因为 class 是 JS 保留字），label 的 for 变成 htmlFor，style 接收对象而不是 CSS 字符串：style={{ border: "1px solid #ddd" }}——外层花括号是「进 JS 世界」，内层是对象字面量。

二、花括号里只能放表达式，不能放语句。 表达式是「能算出一个值」的代码：变量、函数调用、三元、&&、map() 都可以；if、for 是语句，没有值，放进去直接语法错误。条件要用三元或短路语法表达：

<h3>{course.done ? "已完结：" + course.title : course.title}</h3>
{course.done && <span>已完结</span>}

&& 还有个隐藏规则：0 是假值但会被渲染出来——{tags.length && <p>有标签</p>} 在没有标签时会显示一个 0，要用 tags.length > 0 && 明确产出布尔值。false、null、undefined 则什么都不渲染，这正是条件渲染的基础。

三、相邻元素要有一个父级。 JSX 表达式只能返回一个根节点，并列写两个 <div> 会报错；不想多套一层真实标签时用空标签 <></>（Fragment）包裹。

示例拆解

实验区是一张完整的课程摘要卡，四个按钮分别切换四种写法：

• 大写标题：{course.title.toUpperCase()} —— 花括号里的函数调用表达式，每次渲染重新计算；
• 完结徽标：{course.done && <span>已完结</span>} —— 假值不渲染，开关一下就能看到徽标出现和消失；
• 难度三元：{course.level === "intro" ? "入门" : "进阶"} —— 二选一输出；
• 标签列表：{course.tags.map(tag => <span key={tag}>{tag}</span>)} —— map 返回 JSX 数组，React 逐项渲染（key 的完整讨论在 R06）。

验证方式：逐个点按钮，观察对应区域变化；把「完结」关掉再看，徽标连同那行都没了——这就是「假值不渲染」。

动手任务

打开本课实验区，完成三个小改动：

1. 给卡片加一行「标签数量：N」，用 course.tags.length 的表达式实现。
2. 把难度三元改成三档：intro/core/advanced 分别显示「入门/核心/进阶」。
3. 故意把 style={{ color: "#888" }} 写成 style="color: #888"，观察报错信息，再改回来——记住这个报错长什么样。

常见错误

• 用 class 代替 className：控制台警告且样式不生效；同理 label 用 for 会报警告，应为 htmlFor。
• 花括号里写语句：{if (...) x} 直接编译失败；改成三元或把逻辑放进组件函数体里先算好。
• style 写成字符串：style="color: red" 报错，必须是对象 style={{ color: "red" }}，属性名用驼峰（fontSize 而不是 font-size）。
• 并列元素没有父级：return 两个兄弟节点报语法错误；套一层 <div> 或用 Fragment <></>。

检查与复盘

完成下方检查题确认理解。自查清单：

• 能脱口说出 class、for、style 三处与 HTML 的差异
• 看到一段 JSX，能判断每个花括号里是表达式还是语句
• 知道 0 会被渲染、false/null/undefined 不会，条件渲染时能主动规避 && 数字陷阱

参考资料

• React 官方文档：JSX 简介 —— JSX 语法规则的官方说明
• React 官方文档：条件渲染 —— 三元、&& 与提前 return 的写法