1.jsx的基本使用
1.1 createElement()的问题
1.繁琐不简洁
2.不直观,无法一眼看出所描述的结构
3.不优雅,用户体验不爽
1.2 JSX简介
JSX是JavaScript XML的简写,表示在JavaScript代码中写XML(HTML)格式的代码。
优势:声明式语法更加直观、与HTML结构相同,降低了学习成本、提升开发效率。
** JSX是React的核心内容**
1.3 使用步骤
1.使用JSX创建react元素
const title = <h1>Hello JSX<span>这是span</span></h1>
2.渲染react元素
ReactDOM.render(title, document.getElementById(‘root’))
1.4 注意点
1.React元素的属性名使用驼峰命名法
2.特殊属性名:class -> className、for -> htmlFor、tabindex -> tabIndex
3.没有子节点的React元素可以用/>结束。
4.推荐:使用小括号包裹JSX,从而避免JS中的自动插入分号陷阱。
const title = (
<h1 className="title">
Hello JSX
<span>这是span</span>
</h1>
)
2.JSX中使用JavaScript表达式
嵌入JS表达式
数据存储在js中
语法:{JavaScript表达式}
const name = 'jack'
const age = 19
const title = (
<h1 className="title">
Hello JSX,{name},年龄:{age}
<span>这是span</span>
</h1>
)
3.JSX的条件渲染
场景:loading效果
条件渲染:根据条件渲染特定的JSX结构
可以使用if/else或三元运算符或逻辑与逻辑或来实现
// 条件渲染
const isLoading = true
const loadData = ()=>{
// if-else
// if(isLoading){
// return <div>loading...</div>
// }
// return <div>数据加载完成,此处显示加载后的数据</div>
// 三元运算符
// return isLoading? (<div>loading...</div>) : (<div>数据加载完成,此处显示加载后的数据</div>)
// 逻辑与运算符
return isLoading && (<div>loading...</div>)
}
const title = (
<h1>
条件渲染:
{loadData()}
</h1>
)
ReactDOM.render(title, document.getElementById('root'))
4.JSX的列表渲染
如果要渲染一组数据,应该使用数组的map()方法
注意:尽量避免使用索引号作为key,要保证key的唯一性
const songs = [
{id:1,name:'痴心绝对'},
{id:2,name:'像我这样的人'},
{id: 3,name:'南山南'}
]
const list = (
<ul>
{songs.map(item =>
<li key={item.id}>{item.name}</li>
)}
</ul>
)
ReactDOM.render(list, document.getElementById('root'))
5.JSX的样式处理
1.行内样式 --style
const list = (
<h1 style={{color:'pink',backgroundColor:'greenyellow'}}>
JSX的样式处理
</h1>
)
2.类名-- className(推荐)
import './css/index.css'