介绍
JSX = JavaScript XML
是React 专属的 JavaScript 语法扩展，用来编写页面结构，把 HTML 结构写进 JS 里。
本质：语法糖，最终编译为 React.createElement()
浏览器不识别 JSX，必须经 Babel 转译为原生 JS。
提示：vue全面支持JSX
环境依赖
使用 JSX 必须满足：
- 引入
React - 安装 Babel 转译
- script 标签加
type="text/babel"
基础语法
1. 基本结构
const 变量 = (<标签>内容</标签>)
多行 JSX 必须加小括号包裹
2. 唯一根节点
JSX 顶层只能有一个父元素
- 错误：并排写多个标签
- 正确：用
<div>/ 空标签<>包裹
// 正确
<>
<h1>标题</h1>
<p>内容</p>
</>
<> </> 叫 Fragment，不渲染真实 DOM。
3. 标签严格闭合
自结束标签必须写 /
<input />
<img />
<br />
4. 大小写区分
- 小写：HTML 原生标签
div/p/span - 大写：React 自定义组件
Hello/Login
JSX 嵌入 JS 表达式
语法：{ 表达式 }
支持内容
- 变量
- 数值运算
- 三元运算符
- 数组、对象取值
- 函数调用
不支持
- 语句：
if/for/while/switch
const name = "张三"
const num = 10
<div>
{name}
{num + 20}
{num > 5 ? "大于5" : "小于5"}
</div>
JSX 条件渲染
1. 三元表达式（最常用）
{isShow ? <div>显示</div> : null}
2. 逻辑短路 &&
{isLogin && <button>退出登录</button>}
列表渲染 map
规则：数组.map() 遍历，必须加 key
const arr = [1,2,3]
<ul>
{arr.map((item, index)=>{
return <li key={index}>{item}</li>
})}
</ul>
- key：唯一标识，优先用id，不推荐下标
- 简写：省略return
{arr.map(item => <li key={item.id}>{item.name}</li>)}
JSX 属性规范
1. 关键字改名（重点）
| HTML | JSX | 原因 |
|---|---|---|
| class | className | class是JS关键字 |
| for | htmlFor | for是循环关键字 |
2. 所有属性驼峰命名
onClick onMouseEnter tabIndex maxLength
3. 字符串属性 / 动态属性
// 静态
<div title="提示"></div>
// 动态绑定
<div title={tipText}></div>
JSX 行内样式 style
格式：style = {{ 驼峰样式对象 }}
两层大括号：
- 外层：JSX插值
{} - 内层：样式对象
{}
<div style={{
color:"red",
fontSize:"20px",
backgroundColor:"#eee"
}}></div>
样式值必须带单位
JSX 注释写法
{/* 单行 / 多行注释 */}
JSX 事件绑定
语法
on事件名={事件处理函数}
- 原生：
onclick→ JSX：onClick - 函数直接写名称，不加()
function clickFn(){
alert("点击了")
}
<button onClick={clickFn}>点击</button>
传参写法
<button onClick={()=>clickFn(100)}>传参</button>
JSX 渲染值特殊规则
- null / undefined / false 不渲染任何内容
- 0、空字符串 会正常渲染
- 对象不能直接渲染，会报错
JSX 编译原理
JSX 写法
<h1 className="box">hello</h1>
编译后原生JS
React.createElement(
"h1",
{className:"box"},
"hello"
)
参数：
- 标签名
- 属性对象
- 子元素
优缺点
优点
- 结构、数据、逻辑放一起，维护方便
- 语法接近HTML，上手快
- 自带语法校验，减少错误
- 支持JS表达式，灵活极强
缺点
- HTML与JS混杂，初期不习惯
- 需编译，不能直接浏览器运行
- 语法规则多，细节易错
高频易错点汇总
- 忘记 唯一根标签
- class写成class，不用className
- for写成for，不用htmlFor
- 自闭合标签忘记
/ - style写成单层大括号
- 事件写成小写 onclick
- 循环不加key
- {} 里面写if语句
完整可运行 JSX 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script type="text/babel">
const name = "JSX教程"
const list = ["Vue","React","Angular"]
const vdom = (
<div className="wrap">
<h2>{name}</h2>
<ul>
{list.map((item,i)=><li key={i}>{item}</li>)}
</ul>
</div>
)
ReactDOM.createRoot(document.getElementById("root")).render(vdom)
</script>
</body>
</html>