JSX的条件渲染

• 场景loading效果
• 条件渲染: 根据条件渲染特定的JSX结构
• 可以使用if/else或三元运算符和逻辑与运算符来实现

// 导入 react
import React from 'react'
import ReactDOM from 'react-dom'

// 使用 JSX 创建 React 元素
const isLoading = false
// if-else
// const loadData = () => {
//   if(isLoading) {
//     return <div>loading...</div>
//   }
//   return <div>数据加载完成,此处显示加载后的数据</div>
// }

// 三元表达式
// const loadData = () => {
//   return isLoading ? (<div>loading...</div>) : (<div>数据加载完成,此处显示加载后的数据</div>)
// }

// 逻辑与运算符
// 当 isLoading 的值为 true 时 展示元素 否则不展示
const loadData = () => {
  return isLoading && (<div>loading...</div>)
}

const title = (
    <h1 className="title">
      条件渲染:
      {loadData()}
    </h1>
)

// 渲染 React 元素
ReactDOM.render(title, document.getElementById('root'))