1.JSX 是什么？
JSX（JavaScript XML）是 JavaScript 的语法扩展，用于在 React 中描述 UI 结构。它结合了 JavaScript 的表达式和 HTML 的标签语法。
优点：
- 直观：类似于 HTML，易于理解和书写。
- 强大：可以直接嵌入 JavaScript 表达式。
- 高效：与 React 深度集成，优化了渲染性能。
2.基本语法
2.1 JSX 表达式的使用
JSX 可以嵌入 JavaScript 表达式，用 {} 包裹。
const name = "前端开发者";
const element = 你好, {name}!
; // 使用变量
ReactDOM.render(element, document.getElementById('root'));
2.2 JSX 中的标签
JSX 中的标签可以是 HTML 标签，也可以是自定义组件。
function Welcome() {
return 欢迎来到 JSX 世界！
;
}
const element = 2.3 JSX 中的属性
JSX 中的属性可以使用字符串或表达式。
const url = "https://www.example.com";
const element = 点击这里; // 使用表达式
ReactDOM.render(element, document.getElementById('root'));
2.4 JSX 中的样式
JSX 中的样式使用对象形式，属性名使用驼峰命名。
const style = {
color: 'red',
fontSize: '20px', // 驼峰命名
};
const element = 红色文字，20px 大小
;
ReactDOM.render(element, document.getElementById('root'));
2.5 JSX 中的注释
JSX 中的注释需要用 {/* */} 包裹。
const element = (
{/* 这是一个注释 */}
你好，JSX！
);
ReactDOM.render(element, document.getElementById('root'));
3.JSX 高级用法
3.1 条件渲染
JSX 中可以使用三元运算符或 && 进行条件渲染。
const isLoggedIn = true;
const element = (
{isLoggedIn ? 欢迎回来！
: 请登录
} {/* 三元运算符 */}
{isLoggedIn && } {/* 逻辑与 */}
);
ReactDOM.render(element, document.getElementById('root'));
3.2 列表渲染
使用 map 函数渲染列表，每个元素需要一个唯一的 key。
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => (
{number} // 使用 key
));
const element = {listItems}
;
ReactDOM.render(element, document.getElementById('root'));
3.3 嵌套 JSX
JSX 可以嵌套其他 JSX。
const element = (
标题
这是一个段落。
- 列表项 1
- 列表项 2
);
ReactDOM.render(element, document.getElementById('root'));
3.4 事件绑定
JSX 中的事件绑定使用 on 开头的属性，如 onClick。
function handleClick() {
alert('按钮被点击了！');
}
const element = ; // 事件绑定
ReactDOM.render(element, document.getElementById('root'));
3.5 片段（Fragment）
使用
const element = (
标题
这是一个段落。
);
// 或者使用简写
const element = (
<>
标题
这是一个段落。
);
ReactDOM.render(element, document.getElementById('root'));
4.代码示例合集
以下是 JSX 的完整示例，结合了上述特性：
import React from 'react';
import ReactDOM from 'react-dom';
// 数据
const user = {
name: '前端开发者',
age: 25,
hobbies: ['编程', '听音乐', '跑步'],
};
// 事件处理函数
function handleClick() {
alert('你好，' + user.name + '！');
}
// JSX 结构
const element = (
欢迎来到 JSX 世界！
用户名: {user.name}
年龄: {user.age}
兴趣爱好:
{user.hobbies.map((hobby, index) => (
- {hobby}
// 列表渲染
))}
{/* 条件渲染 */}
{user.age >= 18 && 你是一个成年人。
}
{/* 片段 */}
<>
这是一个片段示例。
);
// 渲染到 DOM
ReactDOM.render(element, document.getElementById('root'));
5.JSX 与 HTML 的区别
- 标签属性名：JSX 使用驼峰命名，如 className（HTML：class）。
- 自闭合标签：JSX 必须正确闭合，如 。
- 嵌入表达式：JSX 使用 {} 包裹 JavaScript 表达式。
- 注释语法：JSX 使用 {/* */}。
6.总结
特性 | 示例 | 描述 |
表达式 | {name} | 嵌入 JavaScript 表达式 |
条件渲染 | isLoggedIn && | 根据条件渲染内容 |
列表渲染 | map((item) => | 渲染列表，使用 key |
事件绑定 | onClick={handleClick} | 绑定事件处理函数 |
片段 | 包裹多个元素，避免额外 DOM 节点 |