当一个城市被选中时，如何改变动态数组列表的背景

Question

<div className="images-container">
{cities?.map((city) => (
<>
{city?.isActive && (
<>
{city?.images.map((image) => (
<div className="img-block">
<img className="cardd-img" src={image.image} alt="DGNet" />
<p className="paragrafo">{image?.paragraph}</p>
</div>
))}
</>
)}
</>
))}
</div>

我有一个城市列表，当一个城市被选中时，我需要改变背景，这是我的

const [cities, setCities] = useState([
{
name: "Divinópolis",
isActive: false,
images: [
{
image: imgLogoTIVerde,
paragraph: "Special Sales e Technical Support",
}
],
},
{
name: "Nova Olímpia",
isActive: false,
images: [
{
image: imgLogoLivitech,
paragraph: "Special Sales e Technical Support",
}
],
},

const states = [
{
name: 'minas gerais',
cities: ['Divinópolis', '']
},
{
name: 'paraná',
cities: ['Nova Olímpia', '']
}
]

function handleChangeCity(name) {
const cityChanged = cities.map((city) => {
city.isActive = false;
if (city.name === name) city.isActive = true;
if (city.name === name) city.arrowActive = true;
return city;
});
setCities(cityChanged);
}

<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 => (
<>
<div className="city-block">
<label className="label" for="content">
{city}
</label>
<input type="radio" name="radio" className="single" onClick={() => handleChangeCity(city)} />
</div>
</>
))}
</div>
))}
</div>

当我选择一个城市的时候，一个图片显示在一个容器上，这工作得很好，真正需要的是这个城市div的背景也改变，但只有选定的一个。

我添加了代码部分，当城市被选中时显示图像，每个城市可能有不同的图像或与其他城市相同

Answer 1

您想要添加背景色的div不是100%清楚，但是这个逻辑应该为您工作。

{state.cities.map(city => (
<>
<div className="city-block" style={{ backgroundColor: city.isActive ? 'blue' : 'none' }}>
<label className="label" for="content">
{city}
</label>
<input type="radio" name="radio" className="single" onClick={() => handleChangeCity(city)} />
</div>
</>
))}

Answer 2

你可以传递不同的className是否为active，或者使用样式道具。例子:

<div className={city.isActive ? 'class-with-backgroud-1' : 'class-with-backgroud-2'}>
...
</div>

或:

<div style={{ backgroundColor: city.isActive ? 'color-1' : 'color-2' }}>
...
</div>