JSX笔记

JSX（JavaScript XML）是 React 提出的语法扩展，让我们可以在 JavaScript 中编写类似 HTML 的结构，增强了组件的可读性和表达力。

Loading...

---

JSX 基本语法

示例

jsx

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

JSX 不是字符串，也不是 HTML，而是 React.createElement() 的语法糖。 上面这段代码在编译后会变成：

js

const element = React.createElement('h1', null, 'Hello, JSX!');

---

表达式嵌入

可以在 JSX 中使用 {} 嵌入任意 JavaScript 表达式：

jsx

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

---

属性（Props）

• 使用类似 HTML 的语法定义属性
• 属性值为字符串时可省略 {}
• 属性值为表达式时必须用 {}

jsx

const img = <img src="logo.png" alt="Logo" />;
const user = <UserCard name={name} age={18} />;

注意：在 JSX 中使用 ** className ** 代替 class 。

---

子元素

JSX 标签可以包含子元素，类似 HTML：

jsx

const element = (
  <div>
    <h1>Title</h1>
    <p>This is a paragraph.</p>
  </div>
);

---

条件渲染

jsx

{isLoggedIn ? <Dashboard /> : <Login />}
{messages.length > 0 && <MessageList data={messages} />}

---

列表渲染

使用 map() 动态生成 JSX 元素。

jsx

const items = ['Apple', 'Banana', 'Orange'];
const list = (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

---

样式与事件

内联样式

jsx

const style = { color: "red", fontSize: "20px" };
const element = <p style={style}>Styled Text</p>;

事件绑定

事件名使用 小驼峰命名，并传入函数引用。

jsx

<button onClick={() => alert("Clicked!")}>Click Me</button>

---

JSX 必须有根节点

每个 JSX 表达式必须返回一个根元素：

jsx

// 正确 ✅
return (
  <div>
    <Header />
    <Content />
  </div>
);

如果不想添加额外标签，可以用 <>...</> （Fragment）。

jsx

<>
  <Header />
  <Content />
</>

---

JSX 转换与执行原理

JSX 通过 Babel 转换为 JavaScript 函数调用：

jsx

<div>Hello</div>

转译后变成：

js

React.createElement("div", null, "Hello");

---

常见错误

错误类型	原因
Adjacent JSX elements must be wrapped	缺少根节点
class 无效	应使用 className
{} 中写语句而非表达式	{} 内只能放表达式
忘记添加 key	列表渲染必须提供唯一 key