当前位置： 首页 > ops >正文

React JSX 语法讲解

ops 2025/9/6 9:50:03

🚀 React JSX 语法讲解

1. 课程概述

本课程旨在系统讲解 JSX（JavaScript XML） 的核心概念与实战应用。JSX 是 React 的核心语法扩展，它允许我们在 JavaScript 中编写类似 HTML 的结构，使得构建用户界面变得直观和高效。通过本课程，学生将从理解 JSX 的本质出发，逐步掌握其语法规则、表达能力、与 HTML 的差异，最终能够熟练运用 JSX 构建动态、可复用的 React 组件。

2. 知识目标与实例佐证

知识目标具体内容与实例佐证对应代码示例（简略）
理解 JSX 的本质与编译原理JSX 是 JavaScript 的语法扩展，不是字符串也不是 HTML，最终会被编译（如通过 Babel）为 React.createElement() 函数调用。const element = <h1>Hello, JSX!</h1>; 编译为： React.createElement('h1', null, 'Hello, JSX!');
掌握 JSX 的核心语法规则- 标签必须闭合：<img />
- 属性名使用 camelCase：className（代替 class），htmlFor（代替 for）, onClick
- 必须有一个根元素：用 <div> 或 <>（Fragment）包裹。		<div className="container"><label htmlFor="name">Name:</label><img src="..."/></div>
理解 JSX 中的表达式与语句使用 {} 嵌入任何 JavaScript 表达式（变量、函数调用、运算、三元表达式等），但不能嵌入语句（如 if, for）。const name = 'Alice';
const element = <p>Hello, {name}! It's {new Date().toLocaleTimeString()}</p>;
{isLoggedIn ? <LogoutButton /> : <LoginButton />}
认识 JSX 与 HTML 的关键差异- JSX 是 JavaScript 的语法扩展，最终会转换为 JavaScript 对象。
- 一些 HTML 属性或标签在 JSX 中可能不适用（如 <script>、<style> 需谨慎使用）。
- JSX 允许添加自定义行为（如事件处理函数）和通过属性传递数据。		<button onClick={() => alert('Clicked!')}>Click Me</button>
<Welcome name="Alice" />
了解虚拟DOM与JSX的关系JSX 更像是描述 React 元素（虚拟DOM节点）结构和属性的“蓝图”或“模板”。React 使用 JSX 来高效地创建和更新虚拟 DOM，然后通过对比（diffing）来决定如何最有效地更新真实 DOM。JSX 描述 UI 应该是什么样子，而 React 负责将其高效地渲染和更新到页面上。

3. 技能目标与实战练习

技能目标具体实践与实例佐证实战代码示例（仅供参考）
创建与渲染JSX元素能够编写基本的JSX元素，并在React组件中返回它们。function Greeting() { return <h1>Hello, World!</h1>; }
在JSX中嵌入表达式与进行运算熟练使用 {} 嵌入变量、对象属性、函数调用结果和进行各种运算。function UserInfo({ user, score }) { return <p>User: {user.name}, Score: {score * 10}</p>; }
使用JSX进行条件渲染掌握使用三元表达式和逻辑与（&&）运算符实现条件的条件渲染。function WelcomeMessage({ isLoggedIn, username }) { return ( <div> {isLoggedIn ? <h1>Welcome back, {username}!</h1> : <h1>Please log in.</h1>} {hasUnreadMessages && <p>You have unread messages!</p>} </div> ); }
使用JSX进行列表渲染掌握使用数组的 map() 方法渲染列表数据，并为每个列表项添加唯一的 key 属性（通常使用数据id，而非索引）以提高渲染性能。function TodoList({ todos }) { return ( <ul> {todos.map(todo => ( <li key={todo.id}>{todo.text}</li> ))} </ul> ); }
在JSX中绑定事件与处理交互掌握为元素添加事件处理函数（如 onClick, onChange），注意使用驼峰命名和传递函数引用（而非调用）。并能阻止默认事件行为。function Button() { function handleClick(e) { e.preventDefault(); alert('Clicked!'); } return <button onClick={handleClick}>Click Me</button>; }
组合使用JSX与组件构建界面能够将JSX结构拆分为可复用的组件，并通过 props 向组件传递数据（包括基本类型、对象、数组甚至函数）来动态渲染内容。function App() { return ( <div> <Welcome name="Sara" /> <TodoList todos={todoItems} /> </div> ); }

4. 综合实战案例：简易任务卡片列表

下面是一个融合了多项技能目标的实战示例，您可以在课堂上引导学生实现：

// 任务卡片组件 - 接收props，条件渲染，内联样式
function TaskCard({ title, description, completed, onToggle }) {const cardStyle = {border: '1px solid #ddd',borderRadius: '8px',padding: '16px',margin: '10px 0',backgroundColor: completed ? '#e8f5e9' : '#f9f9f9'};return (<div style={cardStyle}><h3>{title}</h3><p>{description}</p><p>Status: {completed ? '✅ Completed' : '❌ Incomplete'}</p><button onClick={onToggle}>{completed ? 'Mark Incomplete' : 'Mark Complete'}</button></div>);
}// 主应用组件 - 状态管理，列表渲染，传递props
function TaskBoard() {const [tasks, setTasks] = useState([{ id: 1, title: 'Learn JSX', description: 'Complete the JSX tutorial', completed: true },{ id: 2, title: 'Build a React App', description: 'Create your first component', completed: false },{ id: 3, title: 'Practice State Management', description: 'Understand useState hook', completed: false }]);const handleToggleTask = (taskId) => {setTasks(tasks.map(task =>task.id === taskId ? { ...task, completed: !task.completed } : task));};return (<div><h1>Task Board</h1>{/* 条件渲染：显示未完成任务数量 */}<p><strong>{tasks.filter(t => !t.completed).length}</strong> tasks remaining</p>{/* 列表渲染：使用map和key */}<div>{tasks.map(task => (<TaskCardkey={task.id} // 必须提供唯一的keytitle={task.title}description={task.description}completed={task.completed}onToggle={() => handleToggleTask(task.id)} // 传递函数作为prop/>))}</div></div>);
}

案例技能点解析：

  • 组件与Props：TaskCard 组件接收多个 props 来展示不同内容。
  • 条件渲染：根据 completed 状态改变背景色和显示文本。
  • 列表渲染与key：使用 map 渲染列表，并为每个 TaskCard 提供唯一 key。
  • 事件处理：点击按钮触发 onToggle 函数，更新父组件状态。
  • State提升：状态管理在父组件 TaskBoard 中，通过函数prop (handleToggleTask) 与子组件通信。
  • 内联样式：根据状态动态计算样式对象。
  • JSX表达式：在 {} 内进行计算和条件判断。

5. 课后练习与挑战

  1. 基础练习：创建一个 UserProfile 组件，接受 name、age 和 hobbies（数组）作为 props，并渲染出来。为爱好列表添加 key。
  2. 进阶挑战：在上述任务列表中添加新增任务的功能，并实现本地存储（localStorage）持久化任务数据。
  3. 思考题：为什么在列表渲染中，使用数组索引 (index) 作为 key 在某些情况下可能会带来问题？
http://www.xdnf.cn/news/20021.html

相关文章：

  • bat脚本- 将jar 包批量安装到 Maven 本地仓库
  • Highcharts 数据源常见问题解析：连接方式、格式处理与性能优化指南
  • React 样式隔离核心方法和最佳实践
  • 【展厅多媒体】AI虚拟数字人在展厅互动中的应用
  • [VF2] Boot Ubuntu和Debian发行版
  • 智慧城市SaaS平台之智慧城管十大核心功能（五）：监督检查综合管理系统
  • AI急速搭建网站：Gemini、Bolt或Jules、GitHub、Cloudflare Pages实战全流程！
  • FastAPI 中的 Pydantic 的作用
  • docker 部署RustDesk服务
  • 零知开源——基于STM32F103RBT6的智能风扇控制系统设计与实现
  • 头一次见问这么多kafka的问题
  • 针对nvm不能导致npm和node生效的解决办法
  • java.nio.file.InvalidPathException异常
  • 文章采集发布帝国ECMS网站技巧
  • K8s访问控制(一)
  • MySQL高级进阶（流程控制、循环语句、触发器）
  • 电机试验平台：从实验到应用的创新突破
  • OpenCV C++ 进阶：图像直方图与几何变换全解析
  • 大数据毕业设计推荐：基于Spark的零售时尚精品店销售数据分析系统【Hadoop+python+spark】
  • 孟子GPT
  • Ruoyi-vue-plus-5.x第五篇Spring框架核心技术：5.1 Spring Boot自动配置
  • React中使用DDD（领域驱动设计）
  • java,通过SqlSessionFactory实现动态表明的插入和查询（适用于一个版本一个表的场景）
  • c51串口通信原理及实操
  • 进程和线程创建销毁时mutex死锁问题分析
  • 神经网络之深入理解偏置
  • Go语言实战案例- 命令行参数解析器
  • Gin + Viper 实现配置读取与热加载
  • swing笔记
  • 【Flutter】flutter_local_notifications并发下载任务通知实践