什么是 JSX，它如何变成 JavaScript？

Question

Accepted Answer

**JSX** 是一种语法扩展，允许你在 JavaScript 中编写类似 HTML 的标记。浏览器不理解 JSX — 编译器（Babel、SWC、esbuild）在代码运行之前将其转换为常规函数调用。 ## 它编译成什么 ```jsx const el =

Hi {name}

; // the compiler turns it into (classic runtime): const el = React.createElement( "h1", // tag / component { className: "title" }, // props "Hi ", name // children ); ``` 结果是一个普通的 JavaScript 对象（"React 元素"），它*描述* UI — 还不是真实的 DOM 节点。React 读取该对象来构建虚拟 DOM。 ## 关键规则（以及原因） ```jsx function Card({ user }) { return ( <> {/* Fragment: one root without an extra

*/}

{user.name}

{/* camelCase: className, not class */} {user.isAdmin && } {/* {} embeds any JS expression */} ); } ``` - 必须返回**单个根元素**（用 Fragment 包装兄弟元素）。 - 属性使用 **camelCase**（`className`、`onClick`），因为它们映射到 JS，而不是 HTML。 - `{ }` 嵌入表达式（值、三元运算符、`.map()`），但**不能**是 `if` 这样的语句。 ## 为什么这很重要 JSX 只是 `createElement` 的语法糖，所以你在 JSX 中能做的任何事你都能用纯 JS 做 — 它只是让 UI 代码看起来像它产生的标记，这比嵌套函数调用可读性高得多。