JSX 语法详解
在之前的 react 基础文章中，创建元素使用的是 React.createElement() 方法，利用方法创建单层元素还算可以，可是如果出现嵌套结构，使用这种方法就会比较繁琐而且不直观，接下来咱们就讲讲 JSX 语法
1. 什么是 JSX
JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖，也是react.js的使用基础。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐使用JSX。这个是官网：http://facebook.github.io/jsx/
2. JSX 的基本使用
2.1 为什么使用 JSX
原因一：使用 React.createElement() 创建元素比较繁琐，不简洁
原因二：代码不简洁，无法一眼就看出结构层次
例如：
React.createElement( 'div', null,
React.createElement('h1', null, '购物列表'),
React.createElement('ul', null,
React.createElement('li', null, '华为'),
React.createElement('li', null, 'iPhone')
)
)
1
2
3
4
5
6
7
2.2 JSX 简介
JSX 是 JavaScript XML 的简写，表示 JavaScript 代码中写 XML（HTML）格式的代码
优势：声明式语法更加直观、与 HTML 结构相同，降低了学习成本、提升开发效率
JSX 是 react 的核心内容
利用 React.createElement() 方法创建元素
React.createElement( 'div', null,
React.createElement('h1', null, '购物列表'),
React.createElement('ul', null, React.createElement('li', null, '华为'), React.createElement('li', null, 'iPhone'))
)
1
2
3
4
可以看出来这样的写法很不直观
JSX 语法
<div>
<h1>购物列表</h1>
<ul>
<li>华为</li>
<li>iPhone</li>
</ul>
</div>
1
2
3
4
5
6
7
利用 JSX 语法，结构清晰，就是平时写的 HTML 标签
2.3 使用步骤
使用 JSX 语法创建react 元素
// JSX 语法
const el = （<h1>Hello JSX!</h1>）
1
2
使用 ReactDOM.render() 方法渲染 react 元素到页面中
// 渲染
ReactDOM.render(el, document.querySelector('#root'))
1
2
2.4 注意点
react 元素的属性名使用驼峰命名法：tabindex --> tabIndex
特殊属性名： class --> className 、for --> htmlFor
在 react 中所有的标签都必须闭合，无论是单标签还是双标签
推荐：使用小括号包裹 JSX 结构，从而避免 JS 中的自动插入分号陷阱
3. JSX 中使用 JavaScript 表达式
思考
JSX 语法是好用，但是这和写静态 HTML 标签好像没有区别
如何动态显示数据？实际应用一般都是从服务器获取数据，并将数据显示在页面中
猜想一下，既然 JSX 是直接写在 JS 中的，那 JS 当中的变量或函数应该可以在 JSX 中访问
const data = 'OPPO'
render() {
return (
<div>
<h1>购物列表</h1>
<ul>
<li>华为</li>
<li>iPhone</li>
<li>{data}</li>
</ul>
</div>
)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
3.1 嵌入 JS 表达式
语法：{JavaScript表达式}
const name = '小明'
const dv = (
<div>你好，我叫：{name}</div>
)
1
2
3
4
注意点
单打括号中可以是任意的 JavaScript 表达式，如：三元表达式，加减乘除，数组，字符串
单大括号中不能出现语句(例如：if/for等)
JS 对象一般只会出现在style属性中
4. JSX 的条件渲染
思考
条件渲染：根据不同条件渲染不同的 JSX 结构
典型场景：Ajax 异步请求数据中的 loading 效果
结合之前的知识，猜想该如何实现
虽然在 JSX 中无法直接写 if/else 判断，但是可以嵌入函数表达式
在函数表达式中进行 if/else 判断
4.1 条件渲染实现
可以在函数表达式中使用 if/else 或者三元运算符来实现
const loadData = () => {
if(idLoading) {
return <div>数据加载中...</div>
} else {
return <div>数据加载完成</div>
}
}
const load = (
<div>
{loadData()}
</div>
)
1
2
3
4
5
6
7
8
9
10
11
12
13
5. JSX 的列表渲染
思考
实际开发中前端拿到的数据结构
const books = [
{id: 1, name: 'React'},
{id: 2, name: 'Vue'},
]
1
2
3
4
如何转化为下面的这种结构
const books = [
<li>React</li>,
<li>Vue</li>,
]
1
2
3
4
5.1 列表渲染实现
通过遍历数组的方法 map
Array.prototype.map()
const list = (
<ul>
{books.map(item => <li>{item.name}</li>)}
</ul>
)
1
2
3
4
5
6. JSX 的样式处理
行内样式 - style
<h1 style={{ color: 'red', backgroundColor: 'skyblue' }}>
JSX的样式处理
</h1>
1
2
3
类名 - className
需要使用 import '样式文件路径/样式文件名称.css’导入样式文件 ,title类在xxx.css文件中定义好
<h1 className="title">
JSX的样式处理
</h1>
1
2
3
总结
JSX 是React 的核心内容
JSX 表示在JS代码中写HTML结构，是React声明式的体现
使用 JSX 配合嵌入的 JS 表达式、条件渲染、列表渲染，可以描述任意 UI 结构
推荐使用 className 的方式给JSX添加样式
————————————————
版权声明：本文为CSDN博主「新时代农民工Top」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/web00_11/article/details/121315226
