React JSX语法

封面图 • 2025-09-26 • React

React JSX 是一种 JavaScript 的语法扩展，它让开发者可以使用类似 HTML 的语法来编写 React 组件。JSX 实际上是被 Babel 等工具转换成普通的 JavaScript 代码（如 `React.createElement()` 调用）的。

---

## ✅ 基本语法

### 1. **基本结构**

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

这等价于：

```js
const element = React.createElement('h1', null, 'Hello, world!');
```

### 2. **嵌套元素**

```jsx
const element = (
  <div>
    <h1>Hello</h1>
    <p>World</p>
  </div>
);
```

### 3. **属性（props）**

```jsx
const element = <img src="image.jpg" alt="Image" />;
```

### 4. **表达式插入（{}）**

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

### 5. **条件渲染**

```jsx
const showText = true;
const element = <div>{showText && <p>显示这段文字</p>}</div>;
```

或者使用三元运算符：

```jsx
const element = <div>{isLoggedIn ? <p>Welcome</p> : <p>Please login</p>}</div>;
```

---

## 🧩 JSX 的注意事项

### 1. **必须有一个根元素**

JSX 必须包裹在一个单一的父元素中，除非使用 Fragment（`<></>` 或 `<React.Fragment>`）。

```jsx
// 正确
return (
  <div>
    <h1>Hello</h1>
    <p>World</p>
  </div>
);

// 错误：多个根元素
return <h1>Hello</h1><p>World</p>;

// 使用 Fragment
return (
  <>
    <h1>Hello</h1>
    <p>World</p>
  </>
);
```

---

## 🔁 渲染组件

### 1. **函数组件**

```jsx
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 使用
const element = <Welcome name="Alice" />;
```

### 2. **类组件（旧写法）**

```jsx
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
```

---

## 💡 其他常用语法

### 1. **事件处理**

```jsx
function handleClick() {
  console.log("Button clicked!");
}

const element = <button onClick={handleClick}>Click me</button>;
```

### 2. **内联样式（对象形式）**

```jsx
const style = { color: 'red', fontSize: '20px' };
const element = <div style={style}>Styled text</div>;
```

### 3. **动态类名（className）**

```jsx
const isActive = true;
const className = isActive ? "active" : "inactive";
const element = <div className={className}>Class example</div>;
```

---

## 📦 需要安装的依赖

如果你在项目中使用 JSX，需要确保你有以下依赖：

- `react`
- `react-dom`
- `@babel/preset-react`（用于 Babel 编译 JSX）

---

## 📘 总结

| 语法         | 示例                                 | 说明                     |
|--------------|--------------------------------------|--------------------------|
| JSX 标签     | `<h1>Hello</h1>`                    | 类似 HTML 的写法         |
| 表达式       | `{name}`                             | 插入变量或表达式         |
| 属性         | `src="image.jpg"`                    | 设置元素属性             |
| 条件渲染     | `{isLoggedIn && <p>Logged in</p>}`   | 控制是否渲染某部分       |
| 组件         | `<Welcome name="Alice" />`           | 自定义组件               |
| Fragment     | `<></>` 或 `<React.Fragment>`        | 包裹多个元素但不添加 DOM |

---

如果你有具体的问题（比如“如何在 JSX 中使用循环”、“如何传递 props”等），欢迎继续提问！