JSX是什么？修订版本明细

源

采纳

编辑于 7月前

半兽人

JSX是什么？

JSX React

JSX（JavaScript XML） 是 React 中用来 写 HTML 结构 的一种语法，它允许你在 JavaScript 代码中直接写 HTML 代码。

JSX 示例

在普通 JavaScript 里，你可能会这样写：

const element = document.createElement("h1");
element.textContent = "Hello, world!";
document.body.appendChild(element);

但是，在 JSX 里，你可以像写 HTML 一样：

const element = <h1>Hello, world!</h1>;

然后用 React 渲染：

import React from "react";
import ReactDOM from "react-dom";

const element = <h1>Hello, world!</h1>;

ReactDOM.createRoot(document.getElementById("root")!).render(element);

注意：JSX 代码 最终会被编译成 JavaScript，并不会直接执行。

JSX vs HTML

JSX 和 HTML 很像，但它是 JavaScript 扩展语法，有一些不同点：

HTML	JSX（React）	说明
`class="title"`	`className="title"`	JSX 里 `class` 变成 `className`
`onclick="handleClick()"`	`onClick={handleClick}`	事件属性要用 `{}` 括起来
`<input disabled>`	`<input disabled={true} />`	布尔值必须用 `{}`
`style="color: red;"`	`style={{ color: "red" }}`	行内样式用对象 `{}`
`<img src="logo.png">`	`<img src={logo} />`	动态属性需要 `{}`

JSX 最终会变成 JavaScript

JSX 其实是 React.createElement() 的语法糖，
例如：

const element = <h1>Hello, world!</h1>;

最终会被转换成：

const element = React.createElement("h1", null, "Hello, world!");

然后 React 会 把它变成真正的 DOM。

JSX 里如何写 JavaScript 代码？

JSX 允许你在 {} 里面写 JavaScript 表达式，比如：

const name = "Alice";
const element = <h1>Hello, {name}!</h1>;

或者：

const user = { name: "Bob", age: 25 };
const element = <p>姓名: {user.name}, 年龄: {user.age}</p>;

但不能写 if 语句、for 循环，只能写 表达式：

const isLoggedIn = true;
const element = <p>{isLoggedIn ? "已登录" : "请登录"}</p>;

JSX 语法总结

必须有一个根元素：

return (
  <div>
    <h1>标题</h1>
    <p>内容</p>
  </div>
);

不能这样：

return (
  <h1>标题</h1>
  <p>内容</p>  // ❌ 这里会报错
);

如果不想多包裹 div，可以用 Fragment：

return (
  <>
    <h1>标题</h1>
    <p>内容</p>
  </>
);

HTML 属性要用 camelCase：

<button onClick={handleClick}>点击</button>

用 {} 写 JavaScript 代码：

const name = "React";
return <h1>Hello, {name}!</h1>;

CSS class 改成 className：
```
<h1 className="title">标题</h1>
```

行内样式要用对象：

<h1 style={{ color: "red", fontSize: "20px" }}>标题</h1>

结论

JSX 让 React 代码更直观，可以像 HTML 一样写 UI
JSX 不是 HTML，而是 JavaScript 语法扩展，会被编译成 React.createElement()
JSX 里可以用 {} 语法写 JavaScript 代码
所有 HTML 属性必须符合 JavaScript 语法，比如 className、onClick

这样，React 代码就比普通 JavaScript 更简洁、更可读！

预览