04-react的基本：条件渲染

import reactDom from "react-dom"


// 条件渲染 if else
let loading = false
// 写一个函数用于加载
const loadData = () => {
    if(loading) {
        return <div>数据加载中</div>
    }else {
        return <div>数据加载完成，此处直接显示数据</div>
    }
}
// 条件渲染 三元运算符
const loadData1 = () => {
     return loading ?  <div>数据加载中</div> : <div>数据加载完成，此处直接显示数据</div>
}

// 条件渲染 逻辑运算符
// 短路原则 loading = true 才会显示内容  
const loadData2 = () => {
    return loading && <div>数据加载中</div> 
}
console.log(loadData2())  // false 
const title = <div>条件渲染: {loadData2()}</div> 

reactDom.render(title,document.querySelector("#root"))