<think>我们正在讨论
React中
JSX的常用语法。根据提供的引用内容，我们可以总结以下几点：
1.
JSX是JavaScript XML的缩写，允许在JavaScript中写类似HTML的结构。
2.
JSX提高了代码可读性和可维护性，使构建UI更直观。
3.
JSX在编译时被转换成纯JavaScript代码，执行更快，且是类型安全的。
4.
JSX语法中必须有一个根元素包裹，否则会报错。
5. 在
JSX中可以使用JavaScript表达式，用大括号{}包裹。
接下来，我将按照常用语法点进行详细说明：
### 1.
JSX基本元素
JSX的基本元素类似于HTML标签，但要注意一些关键区别：
- 使用小驼峰命名法（camelCase）定义属性名，例如`className`代替`class`，`htmlFor`代替`for`（label标签）。
- 自闭合标签必须以`/>`结束，如`<img />`。
示例：
```
jsx
const element = <h1 className="greeting">Hello, world!</h1>;
```
### 2. 在
JSX中嵌入表达式
在
JSX中，你可以通过大括号`{}`嵌入任何有效的JavaScript表达式，包括变量、函数调用、算术运算等。
示例：
```
jsx
const name = 'John';
const element = <h1>Hello, {name}</h1>;
```
### 3.
JSX中的条件渲染
在
JSX中，可以使用条件语句（如三元运算符）或逻辑与(&&)运算符进行条件渲染。
示例（三元运算符）：
```
jsx
const isLoggedIn = true;
const greeting = <div>{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}</div>;
```
示例（逻辑与）：
```
jsx
const unreadMessages = ['msg1', 'msg2'];
const messageCount = unreadMessages.length;
const alert = <div>{messageCount > 0 && <h2>You have {messageCount} unread messages.</h2>}</div>;
```
### 4.
JSX中的列表渲染
使用数组的`map()`方法将数组转换为
JSX元素列表。注意：每个列表项必须有一个唯一的`key`属性（通常是唯一ID），这有助于
React高效更新列表。
示例：
```
jsx
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>{number}</li>
);
```
### 5.
JSX中的样式
有两种方式定义样式：
- **内联样式**：使用对象形式，样式属性名使用小驼峰命名法（如`backgroundColor`），值用字符串表示。
- **外部CSS类**：通过`className`属性引用外部CSS类。
示例（内联样式）：
```
jsx
const divStyle = {
color: 'blue',
backgroundColor: 'lightgray'
};
const element = <div style={divStyle}>Hello Style!</div>;
```
### 6.
JSX中的事件处理
事件处理函数以小驼峰形式指定（如`onClick`），并将函数引用（而非字符串）作为值传递。
示例：
```
jsx
function handleClick() {
console.log('Button clicked');
}
const button = <button onClick={handleClick}>Click Me</button>;
```
### 7.
JSX中的注释
在
JSX中写注释需要用大括号包裹，使用`/* */`或`//`。
示例：
```
jsx
<div>
{/* 这是单行注释 */}
{
// 这也是单行注释，但注意换行问题
}
<p>Hello World</p>
</div>
```
### 8.
JSX的根元素规则
JSX表达式必须有一个顶层父元素。如果不想添加额外标签，可以使用`<
React.Fragment>`（或简写`<>`）包裹，这样不会在DOM中增加额外节点。
示例：
```
jsx
const fragment = (
<>
<h1>Title</h1>
<p>Content</p>
</>
);
```
### 9.
JSX与HTML的区别
- 属性名使用小驼峰：`tabIndex`（
JSX） vs `tabindex`（HTML）。
- 某些属性名不同：如`className`（
JSX）代替`class`（HTML）。
- 事件处理函数必须传入函数，而不是字符串。
### 小结
JSX是
React的核心特性之一，它使得编写组件更加直观。通过掌握上述常用语法，你可以更高效地使用
React开发应用。记住，
JSX最终会被编译为`
React.createElement()`函数调用，因此它本质上仍然是JavaScript。
§§相关问题§§
1.
JSX和HTML有什么区别？
2. 为什么在
JSX中列表项需要key属性？
3. 如何在
JSX中处理表单元素？
4. 如何避免
JSX注入攻击（XSS）？
5.
JSX中的`children`属性有什么作用？</think>###
React JSX 常用语法教程
JSX（JavaScript XML）是
React的核心语法扩展，允许在JavaScript中直接编写类似HTML的结构。以下是常用语法
详解：
#### 一、基础语法
1. **基本元素**
类似HTML标签，但需遵守XML规则（必须闭合标签）：
```
jsx
const element = <h1 className="title">Hello
JSX</h1>; // className 代替 class
```
2. **根元素规则**
组件必须返回**单个根元素**，可用`<Fragment>`或`<></>`避免额外DOM节点：
```
jsx
return (
<> {/* 空标签相当于 Fragment */}
<Header />
<MainContent />
</>
);
```
#### 二、嵌入表达式
用`{}`包裹JavaScript表达式：
```
jsx
const user = { name: "Alice" };
const element = (
<div>
<p>计算: {5 + 3}</p> {/* 输出: 8 */}
<p>用户: {user.name.toUpperCase()}</p> {/* 输出: ALICE */}
<p>时间: {new Date().toLocaleTimeString()}</p>
</div>
);
```
#### 三、属性处理
1. **动态属性值**
```
jsx
const url = "https://example.com";
const img = <img src={url} alt="示例" />;
```
2. **布尔属性**
省略值时默认为`true`：
```
jsx
<button disabled>不可点击</button> // 等同于 disabled={true}
```
#### 四、条件渲染
1. **三元表达式**
```
jsx
<div>{isLoggedIn ? <LogoutButton /> : <LoginButton />}</div>
```
2. **&& 短路运算**
```
jsx
{hasUnread && <Badge count={unreadCount} />}
```
#### 五、列表渲染
使用`map()`并添加唯一`key`：
```
jsx
const items = ["
React", "Vue", "Angular"];
const list = (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li> // key 提高渲染性能
))}
</ul>
);
```
#### 六、样式处理
1. **内联样式**
使用驼峰命名法的样式对象：
```
jsx
const style = {
backgroundColor: "black",
padding: "10px"
};
<div style={style}>内容</div>
```
2. **CSS类名**
通过`className`属性绑定：
```
jsx
<div className="container active">...</div>
```
#### 七、事件处理
驼峰命名法 + 函数引用（非字符串）：
```
jsx
function handleClick() {
alert("按钮被点击");
}
<button onClick={handleClick}>点击</button>
```
#### 八、注释语法
需包裹在`{}`中：
```
jsx
<div>
{/* 这是单行注释 */}
{
// 多行注释
}
</div>
```
#### 九、
JSX 原理
JSX 会被编译为 `
React.createElement()` 调用：
```
jsx
//
JSX 代码
<h1 id="title">Hello</h1>
// 编译后
React.createElement("h1", { id: "title" }, "Hello");
```
### 注意事项
1. 避免使用JS关键字属性名（如`class` → `className`，`for` → `htmlFor`）
2. 自定义组件必须以**大写字母开头**（区分HTML标签）
3. 表达式
中的`false`、`null`、`undefined`不会渲染
>
JSX 使
React组件更直观，编译优化后执行更快，并在编译阶段捕获类型错误[^2][^3]。
超级会员免费看
本文详细介绍了React生态系统中的JSX，它是React组件中用于指定HTML输出的JavaScript扩展。JSX允许开发者以类似HTML的语法编写代码，实际上在运行时被转换为常规JavaScript。通过JSX，可以更直观地创建和维护React元素树，简化了复杂组件的可读性。文章还涉及了ES5、ES6的区别以及在不同浏览器中的兼容性问题。
订阅专栏 解锁全文
扫一扫
263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
