react+antd表格中的文字设置颜色

Question

react+antd表格，表格中的数值需通过对比判断出大小来显示不同的颜色，最大为红色，最小为绿色，中间值不变色

Answer 1

用table的columns的render函数判断,下面是思路和写法你参考一下

//这个是三目嵌套
columns=[
 {
  title:"value",
dataIndex:"value",
 render(text,record,index)=>{ //text是值，record是当前项对象，index是下标
  return  {text=="max"?<span style={{color:"red"}}>{{text}}</span>:text=="min"?<span style={{color:"blue"}}>{{text}}</span>:<span>{{text}}</span>}
  }
}
]

//定义一个函数调用 

columns=[
 {
  title:"value",
dataIndex:"value",
 render(text,record,index)=>{ //text是值，record是当前项对象，index是下标
     return this.color(text,max,min);
  }
}
]

color=(value,max,min)=>{
  
  if(value=="max"){
    return <span style={{color:"red"}}>{{text}}</span>;
  }else if(value=="min"){
   <span style={{color:"blue"}}>{{text}}</span>
  }else{
    return <span>{{text}}</span>
  }
}