react map渲染列表 但有内容不一样（如个别的css样式） 该怎么写呢？

react map渲染列表 但有内容不一样（如个别的css样式） 该怎么写呢

{ //简单的
  data.map((item,index)=>{
   return (
    <div>
         {item.id==3?<div style={{color:red}}>{item.id}</div>:<div>{item.id}</div>}
   </div>
  )
 })
}

或者
element=(val)=>{  //这里面可以判断
 if(val.id==3){
  return <div style={{color:red}}>{val.id}</div>
 }else{
  return <div>{val.id}</div>
 }
}

{ //复杂的
  data.map((item,index)=>{
   return (
    <div>
         {this.element(item)}
   </div>
  )
 })
}

再或者 
element=(data)=>{
      if(data.length==0){
      retuen 
     }
    data.map((item)=>{
     if(item.id==3){
  return <div style={{color:red}}>{item.id}</div>
 }else{
  return <div>{item.id}</div>
 }
   })
}
render(){
 let {data}=this.state;
 return(
    <div>
   { this.element(data)}
  </div>
 )
}

或者直接 
<div className={{item.id==3?"":""}}></div>
或者
<div style={{item.id==3?"":""}}></div>