Javascript 对map函数中的特定react元素执行操作

我正在开发React应用程序中的一个功能，该功能允许用户单击图像以将其设置为仪表板背景。前提是非常基本的，当用户单击菜单设置中的墙纸设置时，我对JSON文件执行ajax请求，以获取服务器上图像的url

if(this.state.wallpaper === true) {
      let x = 0;
      var defaultWallpapers = this.state.content.map(image => {
        x++;
        // Need to set image as a background so we can overlay
        // things on top of the image.
        var backgroundStyle = {
          backgroundImage: 'url(' + image.url + ')',
          backgroundSize: 'cover'
        }
        return (
          <div key={x} className="col-xs-4">
            <div className="imageBox" style={backgroundStyle}></div>
          </div>
        );
      })
    }
    else {
      var defaultWallpapers = null;
    }

if（this.state.wallpaper===true）{
设x=0；
var defaultwallpaps=this.state.content.map（图像=>{
x++；
//需要设置图像作为背景，以便我们可以覆盖
//图片上方的内容。
变量背景样式={
backgroundImage:'url（'+image.url+'），
背景尺寸：“封面”
}
返回(
);
})
}
否则{
var defaultwallpaps=null；
}

除了我想做的一件事之外，一切都很顺利。我想在用户选择的任何图像上设置覆盖。我得到了一个版本的工作，但就像我假设会发生的那样，覆盖应用于每一幅图像

---

是否有人有任何关于我如何专门针对用户单击的图像的指针？

因此，您可以做的一件事是将当前选定图像的URL存储在组件的状态中。如果在用户选择图像时执行此操作，则可以根据图像是否也是用户当前选择的图像有条件地添加样式

var backgroundStyle = {
  backgroundImage: 'url(' + image.url + ')',
  backgroundSize: 'cover'
};

if (this.state.currentImage === image.url) {
  backgroundStyle['opacity'] = 0.5;
}

return (
  <div key={x} className="col-xs-4">
    <div
      className="imageBox"
      style={backgroundStyle}
      onClick={() => this.setWallpaper(image)}
    ></div>
  </div>
);

var backgroundStyle={
backgroundImage:'url（'+image.url+'），
背景尺寸：“封面”
};
if（this.state.currentImage===image.url）{
背景风格['opacity']=0.5；
}
返回(
此.setWallpaper（图像）}
>
);

---

（显然，你可以做任何你想添加覆盖的事情。为了简单起见，我选择使图像稍微透明，以表明它已经被选中。）

这是合法的。我将把这个标记为正确的，因为它也给了我你的解决方案，还有另一个想法。谢谢。