agentmentoragentmentor

第 02 节:JSX:像 HTML,但不是 HTML

本节 objectives:

  • 能说出 JSX 和 HTML 的三个常见差异。
  • 能用大括号把 JavaScript 表达式放进 JSX。
  • 能修正常见 JSX 语法错误。

先修:第 01 节组件基础 ｜ 上一节 << 01 ｜ 下一节 03 >>

你写的是界面结构,但解析它的是 JavaScript

JSX 的好处是把标签结构和渲染逻辑放在同一个组件里。坏处是它会让人误以为自己在写普通 HTML。React 官方文档明确说,JSX 比 HTML 更严格:标签要闭合,组件通常返回单一根节点,许多属性名使用 JavaScript 风格。1

这节只学会够用的规则,让错误信息不再像谜语。

讲解

第一条:返回一个根节点。

jsx
function Header() {  return (    <div>      <h1>React 基础</h1>      <p>从组件开始</p>    </div>  );}

如果不想多一个真实 DOM 节点,可以用 fragment:

jsx
return (  <>    <h1>React 基础</h1>    <p>从组件开始</p>  </>);

第二条:标签必须闭合。<img> 在 JSX 里要写成 <img />。第三条:属性名接近 JavaScript,例如 class 写成 className,事件名后面会看到 onClick。1

大括号让 JSX 进入 JavaScript 表达式:

jsx
const learner = "Ada";return <h1>欢迎回来,{learner}</h1>;

大括号里放表达式,不是语句。learner.toUpperCase() 可以,if (...) {} 不可以直接塞进去。

跟我做一遍(worked example)

需求:显示一个课程标题、节数和是否推荐。

jsx
function CourseTitle() {  const title = "React 基础";  const lessonCount = 7;  const recommended = true;
  return (    <section className="course-title">      <h1>{title}</h1>      <p>{lessonCount} 节</p>      <p>{recommended ? "推荐从这里开始" : "稍后再学也可以"}</p>    </section>  );}

为什么这样写:className 避开了 HTML class 和 JavaScript class 关键字的冲突;{lessonCount} 把数字表达式放进 UI;三元表达式可以在 JSX 中做简单分支。

换你补全(faded example)

修正下面的 JSX:

jsx
function Avatar() {  const name = "Lin";  return (    <article class="profile">      <img src="/avatar.png">      <p>{name.toUpperCase()}</p>    </article>    <button>关注</button>  );}

参考答案:

jsx
function Avatar() {  const name = "Lin";  return (    <article className="profile">      <img src="/avatar.png" />      <p>{name.toUpperCase()}</p>      <button>关注</button>    </article>  );}

关键判断有三处:className、自闭合 img、一个根节点。

小结 + 通向下一节

JSX 是 JavaScript 里的 UI 描述语法,不是 HTML 文件。根节点、闭合标签、className 和大括号表达式是最先要稳住的四件事。

下一节让组件接收外部数据。否则同一个组件只能显示同一份内容。

Footnotes

  1. Writing Markup with JSX — https://react.dev/learn/writing-markup-with-jsx ↩ ↩2

练习

Level 1: 写一个 BookCard 组件,定义 title、author、pages 三个变量,用 JSX 显示出来。

提示 1

先用固定文本写通结构。

提示 2

再把会变化的部分换成变量。

提示 3

最后只在最小位置加入三元表达式。

自评