功能网站首页模板上海网页设计公司

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;

代码详解

1. 导入 React

   import React from "react";
   

   React 库是构建 React 组件的基础。

2. 定义函数组件

   const App = () => {// ...
   };
   

   使用函数组件定义 App，这是 React 组件的一种形式。

3. 定义数据和函数

   const user = { ... };
   const items = [ ... ];
   const handleClick = () => { ... };
   const buttonStyle = { ... };
   const paragraphStyle = { ... };
   

   • user 对象包含用户信息。
   • items 数组包含水果列表。
   • handleClick 函数处理按钮点击事件。
   • buttonStyle 和 paragraphStyle 对象用于内联样式。

4. 条件渲染

   {user.age >= 18 ? (<p style={paragraphStyle}>欢迎，{user.name}！您已成年。</p>
   ) : (<p style={paragraphStyle}>欢迎，{user.name}！您未成年。</p>
   )}
   

   根据 user.age 的值，渲染不同的消息。

5. 列表渲染

   <ul>{items.map((item, index) => (<li key={index}>{item}</li>))}
   </ul>
   

   使用 map 方法遍历 items 数组，生成列表项。key 属性用于帮助 React 识别每个元素。

6. 事件处理

   <button style={buttonStyle} onClick={handleClick}>点击我
   </button>
   

   按钮点击时触发 handleClick 函数，弹出欢迎消息。

7. 内联样式

   <div style={{ marginTop: "30px", padding: "10px", border: "1px solid #ccc" }}>...
   </div>
   

   使用内联样式设置 div 的样式。

8. 嵌套元素

   <div><h2>用户信息</h2><img src={user.avatarUrl} alt={`${user.name}的头像`} style={{ ... }} /><p>姓名: {user.name}</p><p>年龄: {user.age}</p>
   </div>
   

   嵌套多个元素展示用户信息。

9. 片段（Fragments）

   <React.Fragment>...
   </React.Fragment>
   

   使用 React.Fragment 包裹多个元素，避免在 DOM 中生成额外的节点。也可以使用简写 <> 和 </>。

---

三、运行效果

上述代码在 React 应用中运行后，将呈现以下内容：

1. 欢迎消息：根据用户的年龄显示不同的欢迎信息。
2. 水果列表：显示一个包含多个水果名称的无序列表。
3. 按钮：点击按钮会弹出包含用户姓名的欢迎消息。
4. 用户信息：展示用户的头像、姓名和年龄。

---

四、总结

JSX 是 React 中强大的语法扩展，提供了简洁且直观的方式来编写组件。通过掌握 JSX 的基本语法、表达式插值、属性传递、条件渲染、列表渲染、事件处理、样式设置以及片段的使用，可以有效地构建复杂的 React 应用。