JSX JSX 语法
最后更新：2026-10-28
JSX JSX 语法
JSX 是 JavaScript 的语法扩展，让你在 JS 里直接书写类似 HTML 的界面结构。它最终被编译成普通函数调用，用来描述「界面在当前状态下长什么样」。所有 React 组件的渲染内容都用 JSX 编写。
| 分组 | 核心概念 |
|---|---|
| 类型 | 模式 |
| 引入版本 | React 最早版本 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
const el = <h1 className="title">你好，{name}</h1>
// ↑ 标签 ↑ 驼峰属性 ↑ {} 内可写任意 JS 表达式返回值：无返回值，作为编码约定/心智模型使用：JSX 编译后是普通 JS 表达式，值就是描述界面的对象。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
页面显示标题「你好，React 学习者！」、一行「身份：管理员」和一个输入框；在输入框打字时标题里的名字实时跟着变化。💡 要点
💡 提示 class 要写成 className，for 要写成 htmlFor——因为 class/for 是 JS 保留字。
ℹ️ 说明 花括号 {} 里只能写表达式（变量、运算、三元、函数调用），不能写 if/for 语句。
⚠️ 注意 JSX 必须只有一个根元素；多个兄弟节点要用 <div> 或 <Fragment> 包起来。
🏷️ 核心概念相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q JSX 是什么？是 HTML 吗？
A 不是 HTML。JSX 是 JavaScript 的语法扩展，编译后变成函数调用；它长得像 HTML 只是为了让界面结构更好读。
Q JSX 里怎么写注释？
A 用花括号包住块注释：{/* 注释内容 */}。写在子节点位置时这是唯一可用写法。
Q JSX 里的 if-else 怎么写？
A 花括号里只能放表达式，可用三元运算符 condition ? A : B，或在 return 之前用普通 if 逻辑准备好变量。
