React中如何为map函数内选中的元素设置样式？

我尝试在点击时为选中的div设置样式，但目前样式会应用到所有符合条件的元素，而非仅选中的那个。相关渲染代码和状态更新代码如下：

我的渲染代码： #

let woods = pageURL.map( (wood, key)=> { 
  if(wood.internal_doors_style[0] === this.state.slug_style) { 
    if(this.state.selected) { 
      sel = 'red' 
    } 
    return ( 
      <div style={{background: sel}} key={wood.id} className="menu-item wood-item filter-wood" id={wood.id} onClick={()=> this.setW(wood.internal_doors_wood[0])}> 
        <img src={wood.acf.wood_image.url} alt="" width="40"/> 
        <span className="span">{wood.acf.woods_title}</span> 
      </div> 
    ) 
  } 
})

我的状态更新代码： #

this.setState({ slug_wood: w, selected: !this.state.selected }) 
return single_data = <SingleInternal wood={this.state.slug_wood} style={ this.state.slug_style}/> 

请问是否可以通过每个元素的唯一id（已设置id={wood.id}）来实现仅为选中元素设置样式？

嗨，这问题很好解决！你当前的核心问题是用了一个布尔值selected来控制样式——只要这个状态切换，所有符合wood.internal_doors_style[0] === this.state.slug_style条件的元素都会触发样式变化，自然就全部变红了。

咱们可以利用每个元素的唯一id来精准控制，具体只需要三步：

1. 修改初始状态：把原来的selected布尔值替换成存储选中id的变量，比如selectedWoodId，初始值设为null（表示一开始没有选中任何元素）。

2. 更新点击事件的状态逻辑：点击某个div时，把该元素的wood.id存入状态，而不是切换布尔值。

3. 渲染时精准判断：每个div只在自己的id和状态里的selectedWoodId匹配时，才应用红色背景。

修改后的代码示例： #

1. 初始状态调整（比如在constructor里）：

constructor(props) {
  super(props);
  this.state = {
    // 保留你原有其他状态...
    selectedWoodId: null, // 替换原来的selected: false
  };
  this.setW = this.setW.bind(this);
}

2. 更新渲染代码：

let woods = pageURL.map((wood, key) => {
  if(wood.internal_doors_style[0] === this.state.slug_style) {
    // 只给id匹配的元素设置红色背景
    const bgColor = this.state.selectedWoodId === wood.id ? 'red' : undefined;
    return (
      <div 
        style={{background: bgColor}} 
        key={wood.id} 
        className="menu-item wood-item filter-wood" 
        id={wood.id} 
        onClick={() => this.setW(wood.internal_doors_wood[0], wood.id)}
      >
        <img src={wood.acf.wood_image.url} alt="" width="40"/>
        <span className="span">{wood.acf.woods_title}</span>
      </div>
    )
  }
});

3. 修改状态更新函数setW：

setW(w, selectedId) {
  this.setState({ 
    slug_wood: w, 
    selectedWoodId: selectedId // 存储选中元素的id
  });
  this.single_data = <SingleInternal wood={w} style={this.state.slug_style}/>;
}

这样修改后，每次点击某个div，只有它的id会被存入状态，渲染时只有这个id匹配的div会显示红色背景，完美解决样式批量应用的问题！

内容的提问来源于stack exchange，提问作者user7026096