前言在 Vue 中我们通常把页面结构写在template里面而在 React 中页面结构通常直接写在 JavaScript 或 TypeScript 文件中这种写法就叫 JSX。简单理解JSX HTML 结构 JavaScript 表达式下面总结一些 React JSX 中最常用、最基础的语法。1. JSX 必须有一个根节点错误写法function App() { return ( h1标题/h1 p内容/p ); }正确写法function App() { return ( div h1标题/h1 p内容/p /div ); }如果不想额外包一层div可以使用空标签function App() { return ( h1标题/h1 p内容/p / ); }这个空标签叫做Fragment。2. 标签必须闭合JSX 中所有标签都必须闭合。img src/logo.png / input typetext / br /3. class 要写成 className因为class是 JavaScript 关键字所以 JSX 中要写成className。div classNamecard内容/div同理for要写成htmlForlabel htmlForusername用户名/label input idusername /4. 使用大括号插入变量JSX 中可以使用{}插入 JavaScript 表达式。function App() { const name Tom; return h1你好{name}/h1; }也可以写计算表达式const price 100; return p价格{price * 2}/p;注意{}里面只能写表达式不能直接写if、for这类语句。5. 条件渲染React 中常见的条件渲染方式有两种。三元表达式const isLogin true; return ( div {isLogin ? p欢迎回来/p : p请先登录/p} /div ); 写法const hasMessage true; return ( div {hasMessage p你有新消息/p} /div );Vue 中常用v-ifReact 中没有v-if一般直接使用 JavaScript 表达式。6. 列表渲染React 中没有v-for通常使用数组的map方法。const list [BTC, ETH, SOL]; function App() { return ( ul {list.map((item) ( li key{item}{item}/li ))} /ul ); }列表渲染时每一项都需要设置key。li key{item.id}{item.name}/likey的作用是帮助 React 判断哪些元素发生了变化从而提升渲染效率。7. 事件绑定React 中事件名使用驼峰写法比如onClick、onChange。function App() { const handleClick () { alert(点击了按钮); }; return button onClick{handleClick}点击/button; }输入框事件function App() { const handleChange (event) { console.log(event.target.value); }; return input onChange{handleChange} /; }Vue 中是button clickhandleClick点击/buttonReact 中是button onClick{handleClick}点击/button8. style 写成对象JSX 中的行内样式不是字符串而是 JavaScript 对象。div style{{ color: red, fontSize: 20px }} 红色文字 /div注意 CSS 属性要使用驼峰命名。font-size在 JSX 中写成fontSize9. 组件名必须大写React 通过首字母大小写判断是普通 HTML 标签还是自定义组件。function UserCard() { return div用户卡片/div; } function App() { return UserCard /; }组件名推荐使用大驼峰命名。10. props 组件传参父组件传参function App() { return UserCard nameTom age{18} /; }子组件接收function UserCard(props) { return ( div p姓名{props.name}/p p年龄{props.age}/p /div ); }更常见的写法是解构function UserCard({ name, age }) { return ( div p姓名{name}/p p年龄{age}/p /div ); }11. JSX 中的注释function App() { return ( div {/* 这是 JSX 注释 */} pHello React/p /div ); }12. 完整示例function App() { const user { name: Tom, isVip: true, }; const coins [BTC, ETH, SOL]; const handleClick () { alert(开始交易); }; return ( div classNameapp h1欢迎{user.name}/h1 {user.isVip ? pVIP 用户/p : p普通用户/p} ul {coins.map((coin) ( li key{coin}{coin}/li ))} /ul button onClick{handleClick}开始/button /div ); }总结React JSX 常用规则可以简单记成下面几条class写成className事件写成onClick、onChange变量和表达式放在{}条件渲染用三元表达式或列表渲染用map组件名首字母大写标签必须闭合return中只能返回一个根节点如果你有 Vue 基础可以把 JSX 理解成一种更接近 JavaScript 的模板写法。掌握 JSX 后再继续学习组件、Hooks、状态管理和路由就能开始写完整的 React 项目了。