场景: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>)
}