react循环与条件判断-526互联

react没有语法糖，循环和条件判断都是通过原生js来实现

1. 条件判断

// 三元表达式
const getDiv = (flag)=>{
  return (
      <div>XXX</div>
      {flag?<div>条件1</div>:<div>条件2</div>}  
  )  
}
...
// if判断
const getDiv = (flag)=>{
    if(flag){
        return (
            <div>XXX</div>
            <div>条件1</div>
        )
    }else{
        return (
            <div>XXX</div>
            <div>条件2</div>
        )
    }
}
...
// &&判断
{flag && <div>条件满足</div>}

2. 循环

{list.map((item,index)=>{
    return (
        <div key={index}>{item}</div>
    )
})}