React中如何实现选中城市时修改对应动态列表项的背景色

实现方案 #

你现在的核心问题是渲染城市列表时，没有将states里的城市项和cities状态中的isActive字段做关联，只要补上关联逻辑、动态绑定类名即可实现选中背景变色效果，你原本的图片配置逻辑已经支持不同城市自定义相同/不同图片，不需要额外修改。

1. 优化城市切换方法（可选，规范不可变更新）

原来的写法直接修改了map遍历的原对象，建议调整为返回新对象避免副作用：

function handleChangeCity(name) {
  const cityChanged = cities.map((city) => ({
    ...city,
    isActive: city.name === name,
    arrowActive: city.name === name
  }));
  setCities(cityChanged);
}

2. 改造城市列表渲染逻辑，动态绑定激活类名

渲染每个city-block时，先从cities状态中查询当前城市是否处于激活状态，动态追加激活类：

<div className="scroll">
  {states?.map(state => (
    <div key={state.name} className="cidade">
      <header className="header">
        <h1 className="font-bold">{state.name}</h1>
      </header>
      {state.cities.map(city => {
        // 过滤空城市名，同时查询当前城市激活状态
        if (!city) return null;
        const activeCity = cities.find(item => item.name === city);
        const isActive = activeCity?.isActive ?? false;
        return (
          <div 
            key={city} 
            // 动态拼接类名，激活时追加active类
            className={`city-block ${isActive ? 'active' : ''}`}
          >
            <label className="label" htmlFor="content">
              {city}
            </label>
            <input type="radio" name="radio" className="single" onClick={() => handleChangeCity(city)} />
          </div>
        )
      })}
    </div>
  ))}
</div>

注意：原来的label的for属性在JSX里要写htmlFor，不然会有语法警告。

3. 补充CSS样式

给激活状态的city-block加自定义背景色即可：

.city-block.active {
  /* 替换为你需要的背景色 */
  background-color: #e6f7ff;
  border-radius: 4px;
}

多图片配置说明

你原本的结构已经支持每个城市自定义图片，只要在初始化cities状态时，给对应城市的images数组添加多个图片对象即可：

const [cities, setCities] = useState([
  {
    name: "Divinópolis",
    isActive: false,
    images: [
      {
        image: imgLogoTIVerde,
        paragraph: "Special Sales e Technical Support",
      },
      // 追加更多图片即可
      {
        image: 你的其他图片变量,
        paragraph: "其他描述",
      }
    ],
  }
])

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