所念皆所得吖 2021-07-21 18:55 采纳率: 92.1%
浏览 83
已采纳

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

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

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2021-07-22 09:30
    关注
    
    { //简单的
      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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已采纳回答 7月22日
  • 创建了问题 7月21日

悬赏问题

  • ¥15 DIFY API Endpoint 问题。
  • ¥20 sub地址DHCP问题
  • ¥15 delta降尺度计算的一些细节,有偿
  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错
  • ¥15 Matlab编程问题
  • ¥15 训练的多模态特征融合模型准确度很低怎么办
  • ¥15 kylin启动报错log4j类冲突