Question

如何在此处动态更改图标颜色：

var byillingvalues=[];
for(var i in this.state.Alldata){                       
  byillingvalues.push({bycdata:this.state.Alldata[i].label})
}

var values=byillingvalues.map(function(d,idx){
        let colors=["#F0F8FF","#FFE4C4","#8A2BE2"];
        for(var i=0;i<=colors.length;i++){
              if(i==idx){
               return (<span key={idx}>{<i className="fa fa-square" aria-
                hidden="true" color:colors[i]></i>}&nbsp;{d.bycdata} &nbsp;&nbsp;</span>);
             }

        }   

});

如何动态更改图标颜色？

Answer 1

color属性需要是i标记的样式。你需要写

<i className="fa fa-square" 
   aria-hidden="true" 
   style={{color:colors[i]}}>
</i>

Answer 2

您可以使用以下

将属性传递给反应中的对象

public function show($id) 
{

     /* Get All CSCS Images For User */
     $my_images= Image::all(); 

    /* Get User From ID */
    $user = User::find($id);

    /* Return View */
    return view('users.show')->with('user', $user)->with('images', $my_images); 
}

Answer 3

    var byillingvalues=[];
    for(var i in this.state.Alldata){                               
         byillingvalues.push({bycdata:this.state.Alldata[i].label})
    }
    var values=byillingvalues.map(function(d,idx){
    let colors=
        ["#6cbe45","#347cb5","#6cc1e6","#9d6bad","#4ebe9f","#4ebe9f","#bed730"];                            
    for(var i=0;i<colors.length;i++){
            if(i==idx){     
             return (<span key={idx}>{<i className="fa fa-square" aria-
              hidden="true"  style={{color:colors[i]}}></i>}&nbsp;{d.bycdata} 
                  &nbsp;&nbsp;</span>);
            }
    }

});

如何动态更改图标颜色js

3 个答案: