1.注意点
1.React元素的属性名使用驼峰命名法
2.特殊属性名:class->className、for->htmlFor、tabindex->tabIndex
3.没有子节点的React元素可以用/>结束
4.推荐使用小括号包裹JSX,从而避免JS中的自动插入分号陷阱
2.JSX 中使用JavaScript表达式
//JSX中使用JavaScript表达式
const name = 'jack'
const title =(
<h1>
hello jsc,{name}
</h1>
)
3.JSX的条件渲染
//条件渲染:
const isLoading = true
const loadData = () => {
if (isLoading) {
return <div>loading...</div>
}
return <div>数据加载完成,此处显示加载后的数据</div>
}
//三目运算
const isLoading = true
const loadData = () => {
return isLoading ? (<div>loading...</div>) : (<div>数据加载完成,此处显示加载后的数据</div>)
}
//逻辑运算符
const isLoading = true
const loadData = () => {
return isLoading && (<div>loading...</div>)
}
const title = (
<h1>
条件渲染:
{loadData()}
</h1>
)
//渲染react元素
ReactDOM.render(title, document.getElementById('root'))
4.JSX 的列表渲染
如果要渲染一组数据,应该使用数组的map()方法
注意:渲染列表时应该添加key 属性,key属性的值要保证唯一
原则:map()便利谁,就给谁添加key属性
注意:尽量避免使用索引号作为key
//歌曲列表
const songs = [
{ id: 1, songName: '痴心绝对' },
{ id: 2, songName: '像我这样的人' },
{ id: 3, songName: '南山南' },
]
const list = (
<ul>
{songs.map(item => <li key={item.id}>{item.songName}</li>)}
</ul>
)
//渲染react元素
ReactDOM.render(list, document.getElementById('root'))
5.JSX的样式处理
5.1 行内样式-style(不推荐)
const list = (
<h1 style={{ color: 'red', background: 'skyblue' }}>
JSX的样式处理
</h1>
)
//渲染react元素
ReactDOM.render(list, document.getElementById('root'))
5.2 类名方式 className(推荐)
//css样式
.title {
text-align: center;
}
//引入css
import './css/index.css'
const list = (
<h1 className="title" style={{ color: 'red', background: 'skyblue' }}>
JSX的样式处理
</h1>
)