2.jsx介绍
JSX是JavaScript XML的简写表示了在JavaScrit代码中写XML(HTML)格式的代码.
优势:声明式语法更加直观,与HTML结构相同,降低学习成本,开发效率。
JSX是react的核心内容
jsx不是标准的js语法,是js的语法扩展,脚手架内置的@babel/plugin-transform-react-jsx包,用来解释该语法。
JSX使用步骤
- 导入reactDom包
- 使用jsx创建react元素
- 将react元素渲染到页面中
核心代码:
import ReactDOM from 'react-dom'
// 创建元素
const title = <h1 title="哈哈"></h1>
// 渲染元素
ReactDOM.render(title, document.getElementById('root'))
JSX注意事项
- JSX必须要有一个根节点,如果没有根节点,可以使用<>、</>(幽灵节点) 或者<React.Fragment></React.Fragment>
- 所有标签必须结束,如果是单标签可以使用 />结束
- JSX中语法更接近JavaScript,属性名采用驼峰命名法。
- class====> className
- for =====> htmlFor - JSX可以换行,如果JSX有多行,推荐使用()包裹JSX,防止JS自动插入分号的bug。
- JSX的语法与html语法相比更加严格,更加接近js
JSX中使用JavaScript表达式
1.可以访问变量名
const name = 'zs'
const age = 18
const title = (
<h1>
姓名:{name}, 年龄:{age}
</h1>
)
2.可以访问对象的属性
const car = {
brand: '玛莎拉蒂'
}
const title = (
<h1>
汽车:{car.brand}
</h1>
)
3.可以访问数组的下标
const friends=['张三','李四']
const title=(
<h1>
汽车:{friends[1]}
</h1>
)
4.可以使用三元运算符
const gender=18
const title=(
<h1>
是否允许进入:{age>18?'是':'否'}
</h1>
)
5.可以访问方法
function sayHi(){
return '王饱饱'
}
const title=<h1>姓名:{sayHi()}</h1>
6. jsx本身
const span=<span>我是一个span</span>
const title=<h1>JSX 作为表达式:{span}</h1>
- jsx中可以出现任意的js表达式
- 在jsx中只能出现js表达式,不能出现js语句,比如 if、for、while
- jsx中不能出现语句,这会导致代码出现错误
条件渲染
1.通过if/else渲染
const isLoding = false
const loadData = () => {
if (isLoding) {
return <div>数据加载中.....</div>
} else {
return <div>数据加载完成,此处显示加载后的数据</div>
}
}
const title = <div>条件渲染:{loadData()}</div>
列表渲染
const songs=[
{id:1,name:'痴心绝对'},
{id:2,name:'像我这样的人'},
{id:2,name:'南山南'}
]
const list=songs.map(song=>(<li>{song.name}</li>))
const dv={
<div>
<ul>{list}</ul>
</div>
}
直接在JSX中渲染
const songs=[
{id:1,name:'痴心绝对'},
{id:2,name:'像我这样的人'},
{id:2,name:'南山南'}
]
const dv={
<div>
<ul>{songs.map(song=><li>{song.name}</li>)}</ul>
</div>
}
遍历时添加key属性
const dv=(
<div>
<ul>
{songs.map(song=>(<li key={song.id}>{song.name}</li>))}
</ul>
)
- 列表渲染时应该给重复渲染的元素添加key属性,key属性
的值要保证唯一- key值尽量避免使用index下边
样式处理
像width/height等属性,可以省略px,直接使用数值即可
如果是需要使用百分比的单位不变(60%)
1.行内样式-style
const dv=(
<div style={ { color:'red',backgroundColor:'pink'} }>style样式</div>
)
- 类名-className
import './base.css'
const dv=<div className="title">style样式</div>