JSX的基本使用----JSX的条件渲染

JSX的条件渲染有3中方法,分别是

• if-else语句
• 三元表达式
• 逻辑与

if-else语句

const isLoading = true
const title = () => {
  if (isLoading) {
    return <h1>加载成功</h1>
  }
  return <h1>加载中</h1>
}
const dv = (
  <div>
    {title()}
  </div>
)
ReactDOM.render(dv, document.getElementById('root'))

三元表达式

const isLoading = true
const title = () => isLoading ? (<h1>加载成功</h1>) : (<h1>加载中</h1>)
const dv = (
  <div>
    {title()}
  </div>
)
ReactDOM.render(dv, document.getElementById('root'))

逻辑与运算符

const isLoading = true
const title = () => isLoading && (<h1>加载成功</h1>)
const dv = (
  <div>
    {title()}
  </div>
)
ReactDOM.render(dv, document.getElementById('root'))