JSX vs HTML JSX 与 HTML
最后更新：2026-10-28
JSX vs HTML JSX 与 HTML
JSX 看起来像 HTML，但有几处关键差异：属性用小驼峰命名、class 要写 className、style 接收对象、标签必须闭合。提前记住这些差异，能避开新手最常见的编译报错。
| 分组 | 核心概念 |
|---|---|
| 类型 | 参考 |
| 引入版本 | React 最早版本 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
<div className="box" style={{ fontSize: 14 }}>
// ↑ class 要写 className ↑ style 是对象，属性驼峰
<img src="a.png" /> {/* 单标签必须自闭合 */}
<label htmlFor="mail">邮箱</label> {/* for 要写 htmlFor */}
</div>返回值：无返回值，作为编码约定/心智模型使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
一张带边框圆角的卡片，内含标题、「邮箱」label、一个占位输入框和一行红色说明文字——全部以 JSX 驼峰属性与对象 style 渲染出来。💡 要点
⚠️ 注意 写 class 会直接编译报错，必须用 className；style={{}} 是「对象字面量」，双层花括号。
💡 提示 img、br、input 等单标签在 JSX 里必须自闭合：<img />，否则编译失败。
ℹ️ 说明 其余属性大多只是改成小驼峰：onclick → onClick，tabindex → tabIndex，逻辑不变。
🏷️ 核心概念相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q JSX 为什么用 className 而不是 class？
A 因为 JSX 是 JS 的一部分，而 class 是 JavaScript 的保留字，所以 React 选用 className，与 DOM API 的 element.className 一致。
Q JSX 里 style 怎么写？
A style 接收对象而非字符串：style={{ fontSize: 14, color: 'red' }}，属性用小驼峰，数值会自动当作像素。
Q JSX 标签可以不闭合吗？
A 不行。XML 式的严格闭合是 JSX 的规则，<img>、<br>、<input> 都必须写成自闭合形式。
