react JXL的条件渲染

场景:loading效果
条件渲染:根据条件渲染特定的JXL结构

条件渲染的三种方式

1 if else

//导入react
import React from "react";
import ReactDOM from "react-dom";


const flag = true
const loadData = () => {
    if (flag) {
        return <div>正在加载请稍后..</div>
    }
    return <div>hello pig</div>
}

const title = (
    <h1>
        {loadData()}
    </h1>

)


//渲染react
ReactDOM.render(title, document.getElementById("root"));

 flag 改成false

 

2 三元运算符

//也可以用三元运算符来表示
const loadData = () =>{
    return flag?<div>正在加载请稍后..</div>:<div>hello pig</div>
}

3 逻辑与

//逻辑与运算符 → 适合要么展示要么隐藏的情况
const loadData = () =>{
    return flag&&(<div>正在加载请稍后..</div>)
}