在React中更改图标的颜色

Question

我有一个React组件，其中包含div元素的迭代，如下所示：

render(){
  return(
      <div className="col-md-12">
         {this.state.pageOfItems.map(opration =>
                <div className=" col-md-4 icondiv" key={opration.id}
                    onClick={this.selectOperation.bind(this,opration,true)}> 
                  <FontAwesome name="square"  style={{ ariaHidden:true, fontSize:'35px'}}/>
                       <span className="displayblock">{opration.name}</span>
                 </div>

          )}
      </div>
    );
}

现在我的问题是当我执行onClick方法时，我想更改单击的div的方形图标颜色。 其余图标的颜色应相同。 现在，当我单击另一个div的图标时，应该会发生同样的情况。 我该如何实现。 我知道可以将CSS颜色设置为其他颜色，但是如何识别特定的div并更改颜色？

Answer 1

在您的状态下，添加成员'selectedOperationId'并在'selectOperation'回调中对其进行更新。

然后按条件构建div的className

className={operation.id === this.state.selectedOperationId ? "selected col-md-4 icondiv" : "col-md-4 icondiv"}

并为.selected类制作适当的CSS