JSX-2

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>
)