react中jsx的基本使用

jsx的基本使用

const title = <h1>hello</h1>
ReactDOM.render(title, document.getElementById('root'))

⚠注意：

• jsx本身可以作为js表达式
• 可以使用函数调用表达式
• 单大括号中可以使用任意的javascript表达式
• js中的对象是特例，一般在style中
• jsx中不能出现语句（if/for）

jsx的条件渲染

const isLoading = true
const loadData=()
=>{
    if(isLoaidng){
    return <div>渲染完成</div>
    }
    return <div>正在渲染中</div>

jsx的列表渲染

• 如果要渲染一组数组，应该使用数组的map方法
• 渲染列表需要key属性
• map遍历谁就给谁加key

const songs = [
{id:1,name:['痴心绝对'},

]

jsx的样式处理

• 行内样式
• className（推荐方式）