React学习教程，从入门到精通， React 入门指南：React JSX 语法知识点详解及案例代码(8）
React JSX 语法知识点详解及案例代码
JSX（JavaScript XML）是 React 中的一种语法扩展，允许在 JavaScript 代码中编写类似 HTML 的结构。它使得组件的编写更加直观和简洁。
一、JSX 语法知识点
1. 基本语法
JSX 允许在 JavaScript 中直接编写类似 HTML 的标签。例如：
const element = <h1>Hello, world!</h1>;
2. 表达式插值
使用花括号 {} 可以在 JSX 中嵌入 JavaScript 表达式，如变量、函数调用等。
const name = "Alice";
const element = <h1>Hello, {name}!</h1>;
3. 属性（Props）
在 JSX 中，属性使用类似 HTML 的语法传递，但属性名使用驼峰命名法（camelCase）。
const element = <img src={user.avatarUrl} alt="User Avatar" />;
4. 嵌套元素
JSX 支持嵌套元素，必须有一个根元素包裹所有子元素。
const element = (<div><h1>Title</h1><p>Content goes here.</p></div>
);
5. 条件渲染
可以使用 JavaScript 的条件运算符、三元运算符或逻辑运算符在 JSX 中进行条件渲染。
const isLoggedIn = true;
const element = <div>{isLoggedIn ? <p>Welcome back!</p> : <p>Please sign in.</p>}</div>;
6. 列表渲染
使用 map 方法遍历数组并生成 JSX 元素列表。
const items = ["Apple", "Banana", "Cherry"];
const listItems = items.map((item, index) => <li key={index}>{item}</li>);
const element = <ul>{listItems}</ul>;
7. 事件处理
在 JSX 中，事件处理使用驼峰命名法，并传递函数作为事件处理器。
function handleClick() {alert("Clicked!");
}
const element = <button onClick={handleClick}>Click Me</button>;
8. 样式（Styles）
可以通过 style 属性传递一个对象来设置内联样式，或者使用 className 属性添加 CSS 类。
const style = { color: "blue", fontSize: "16px" };
const element = <p style={style}>Styled Text</p>;
或者：
const element = <p className="styled-paragraph">Styled Text</p>;
9. 注释
在 JSX 中使用 {} 包裹注释：
const element = (<div>{/* 这是一个注释 */}<p>Hello, world!</p></div>
);
10. 片段（Fragments）
使用 <React.Fragment> 或简写 <> 和 </> 来包裹多个元素而不增加额外的 DOM 节点。
const element = (<><p>First item</p><p>Second item</p></>
);
二、详细案例代码
以下是一个包含上述知识点的 React 组件示例，包含详细注释。
// 导入 React 库
import React from "react";// 定义一个函数组件 App
const App = () => {// 定义一些变量和数组const user = {name: "张三",age: 25,avatarUrl: "https://via.placeholder.com/150",};const items = ["苹果", "香蕉", "樱桃", "日期", "无花果"];// 定义事件处理函数const handleClick = () => {alert(`你好，${user.name}！`);};// 定义样式对象const buttonStyle = {backgroundColor: "#4CAF50",color: "white",padding: "10px 20px",border: "none",borderRadius: "5px",cursor: "pointer",};const paragraphStyle = {fontSize: "16px",color: "#333",marginBottom: "20px",};return (// 使用 React.Fragment 包裹多个元素<React.Fragment>{/* 条件渲染：根据用户年龄显示不同的消息 */}{user.age >= 18 ? (<p style={paragraphStyle}>欢迎，{user.name}！您已成年。</p>) : (<p style={paragraphStyle}>欢迎，{user.name}！您未成年。</p>)}{/* 列表渲染：显示水果列表 */}<ul>{items.map((item, index) => (<li key={index}>{item}</li>))}</ul>{/* 事件处理：按钮点击事件 */}<button style={buttonStyle} onClick={handleClick}>点击我</button>{/* 内联样式和嵌套元素 */}<div style={{ marginTop: "30px", padding: "10px", border: "1px solid #ccc" }}><h2>用户信息</h2><img src={user.avatarUrl} alt={`${user.name}的头像`} style={{ width: "100px", height: "100px", borderRadius: "50%" }} /><p>姓名: {user.name}</p><p>年龄: {user.age}</p></div></React.Fragment>);
};// 导出 App 组件
export default App;
代码详解
-
导入 React
import React from "react";React 库是构建 React 组件的基础。
-
定义函数组件
const App = () => {// ... };使用函数组件定义
App，这是 React 组件的一种形式。 -
定义数据和函数
const user = { ... }; const items = [ ... ]; const handleClick = () => { ... }; const buttonStyle = { ... }; const paragraphStyle = { ... };user对象包含用户信息。items数组包含水果列表。handleClick函数处理按钮点击事件。buttonStyle和paragraphStyle对象用于内联样式。
-
条件渲染
{user.age >= 18 ? (<p style={paragraphStyle}>欢迎，{user.name}！您已成年。</p> ) : (<p style={paragraphStyle}>欢迎，{user.name}！您未成年。</p> )}根据
user.age的值，渲染不同的消息。 -
列表渲染
<ul>{items.map((item, index) => (<li key={index}>{item}</li>))} </ul>使用
map方法遍历items数组，生成列表项。key属性用于帮助 React 识别每个元素。 -
事件处理
<button style={buttonStyle} onClick={handleClick}>点击我 </button>按钮点击时触发
handleClick函数，弹出欢迎消息。 -
内联样式
<div style={{ marginTop: "30px", padding: "10px", border: "1px solid #ccc" }}>... </div>使用内联样式设置
div的样式。 -
嵌套元素
<div><h2>用户信息</h2><img src={user.avatarUrl} alt={`${user.name}的头像`} style={{ ... }} /><p>姓名: {user.name}</p><p>年龄: {user.age}</p> </div>嵌套多个元素展示用户信息。
-
片段（Fragments）
<React.Fragment>... </React.Fragment>使用
React.Fragment包裹多个元素，避免在 DOM 中生成额外的节点。也可以使用简写<>和</>。
三、运行效果
上述代码在 React 应用中运行后，将呈现以下内容：
- 欢迎消息：根据用户的年龄显示不同的欢迎信息。
- 水果列表：显示一个包含多个水果名称的无序列表。
- 按钮：点击按钮会弹出包含用户姓名的欢迎消息。
- 用户信息：展示用户的头像、姓名和年龄。
四、总结
JSX 是 React 中强大的语法扩展，提供了简洁且直观的方式来编写组件。通过掌握 JSX 的基本语法、表达式插值、属性传递、条件渲染、列表渲染、事件处理、样式设置以及片段的使用，可以有效地构建复杂的 React 应用。