一、JSX 基础概念
1. 什么是 JSX
JSX 是一种 JavaScript 的语法扩展，它允许你在 JavaScript 代码中编写类似 XML 的结构。虽然 JSX 看起来像 HTML，但实际上它更接近 JavaScript。
2. 为什么使用 JSX
-
直观的 UI 表达：代码结构与最终 DOM 结构相似，易于理解。
-
代码可维护性：将 HTML 与 JavaScript 逻辑整合，减少文件分离带来的复杂性。
-
编译时检查：在编译阶段发现错误，而不是运行时。
二、JSX 基本语法
1. 基本标签结构
const element = <h1>Hello, JSX!</h1>;
-
标签必须闭合（如
<br />） -
支持嵌套结构
2. 注释
const element = (
<div>
{/* 这是一个注释 */}
<h1>Hello</h1>
</div>
);
三、JSX 中的表达式
1. 嵌入 JavaScript 表达式
使用 {} 可以在 JSX 中嵌入任意 JavaScript 表达式：
const name = "John";
const element = <h1>Hello, {name}</h1>;
支持函数调用：
function getGreeting() {
return "Welcome";
}
const element = <h1>{getGreeting()}</h1>;
2. 条件渲染
使用三元运算符：
const isLoggedIn = true;
const element = (
<div>
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in</h1>}
</div>
);
使用逻辑与运算符：
const count = 5;
const element = (
<div>
{count > 0 && <p>You have {count} messages</p>}
</div>
);
3. 列表渲染
使用数组的 map() 方法：
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li key={number}>{number}</li>);
const element = <ul>{listItems}</ul>;
注意：每个列表项都应该有一个唯一的 key 属性，这有助于 React 识别哪些元素发生了变化。
四、JSX 属性
1. 使用字符串字面量
const element = <img src="profile.jpg" alt="Profile" />;
2. 使用 JavaScript 表达式
const width = 200;
const element = <img src="profile.jpg" style={{ width: width }} />;
3. 驼峰命名法
由于 JSX 是 JavaScript，属性名使用驼峰命名法而不是 HTML 的 kebab-case：
const element = <div className="container"></div>; // 不是 class
const element = <input onChange={handleChange} />; // 不是 onchange
4. 展开属性
const props = { firstName: "John", lastName: "Doe" };
const element = <User {...props} />;
五、JSX 样式
1. 内联样式
const style = {
color: "red",
fontSize: 24, // 注意驼峰命名
backgroundColor: "#f0f0f0",
};
const element = <h1 style={style}>Styled Text</h1>;
2. 类名样式
// CSS
.container {
padding: 20px;
}
// JSX
const element = <div className="container">Content</div>;
六、JSX 与组件
1. 函数组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="John" />;
2. 类组件
已弃用
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
const element = <Welcome name="John" />;
3. 自定义组件
// 定义组件
function Button(props) {
return <button onClick={props.onClick}>{props.label}</button>;
}
// 使用组件
const element = <Button label="Click me" onClick={handleClick} />;
七、JSX 注意事项
1. JSX 必须有一个根元素
错误：
const element = (
<h1>Hello</h1>
<p>World</p>
);
正确：
const element = (
<div>
<h1>Hello</h1>
<p>World</p>
</div>
);
2. 大写组件名
JSX 标签名首字母必须大写，小写标签会被视为原生 HTML 标签。
3. 列表渲染与 key 属性
遍历生成列表时，每个元素必须有唯一的 key（通常使用稳定 ID）。
const items = list.map((item) => (
<li key={item.id}>{item.name}</li> // 使用唯一 ID 作为 key
));
4. JSX 中的引号与大括号
字符串属性：使用引号。
<MyComponent title="Hello" /> // 字符串值
表达式属性：使用大括号。
<MyComponent count={1 + 2} /> // 表达式计算结果
5. 动态组件名
直接使用变量作为组件名会失败，需通过对象映射。
错误示例：
const ComponentName = 'Button';
<ComponentName /> // 解析为 HTML 标签
正确方式：
const components = { Button: () => <button>Click</button> };
const ComponentName = 'Button';
<components[ComponentName] /> // 通过映射获取组件
