jsx的条件渲染

根据条件渲染特定的jsx结构

1、if/else

const isLoading = false;
// 函数
const loadData = () => {
  if (isLoading) {
    return (<div>数据加载中，请稍后.........</div>)
  }else {
    return (<div>数据加载完成</div>)
  }
}
// jsx
const divvvvv = (<div>{loadData()}</div>)
//渲染
ReactDom.render(divvvvv,document.getElementById('root'))

2、三元表达式

//三元表达式 
const isLoading = false;
const loadData = () => {
  return isLoading ? (<div>数据加载中，请稍后.........</div>):(<div>数据加载完成</div>)
}
// jsx
const divvvvv = (<div>{loadData()}</div>)
//渲染
ReactDom.render(divvvvv,document.getElementById('root'))

3、短路运算符

（逻辑与，当第一个是false时候，就会往后执行。当第一个是true的时候就不往后执行了。isLoading = true，接着往后执行，后面的jsx被返回。当sLoading = false，就不往后执行了–短路）

短路运算符，直接短路了，停止不再往后走。或者接着往后走

结果：isLoading = true 页面：

结果：isLoading = false 页面：

// 逻辑与
const isLoading = false;
const loadData = () => {
  return isLoading && (<div>数据加载中，请稍后.........</div>)
}

const divvvvv = (<div>{loadData()}</div>)
ReactDom.render(intru,document.getElementById('root')