如何在 React 中动态更改映射数组的单个项目的样式

Question

我正在尝试在单击时更改baseLayer的背景。下面的代码使单击按钮时所有 baseLayers 为蓝色，但我只希望单击的项目为蓝色。

import React, { useState } from 'react'
import uuid from 'uuid/v1'
const BaseLayers = (props) => {
let tacos = props.tacos;
const [background, setBackground] = useState({ isSelected: false, item: '' });
return (
<div className='base-layers'>
<div className="base-layers-info" >START BY CHOOSING A BASE LAYER</div>
{ Array.isArray(tacos.base_layers) && tacos.base_layers.map(item => {
return  <div className="base-layer" key={uuid()} id={item.title} **style={{ backgroundColor: background.isSelected ? 'blue' : 'red' }} >**
<h4 className="base-layer-title">{ item.title }</h4>
<img src={require('../img/taco-cards.jpg')} alt="taco" />
<div className="base-layer-ingredients-container">
{ item.ingredients.map(item => {
if(typeof item === 'string'){
return   <h6 className="base-layer-ingredients" key={uuid()}>{ item }</h6>
}
if(typeof item === 'object'){
return  <h6 className="base-layer-ingredients" key={uuid()}>{ item.title }</h6>
return  <h6 className="base-layer-ingredients" key={uuid()}>{ item.ingredients }</h6>
}
}) }
</div>
<button className="base-layer-button" onClick={(e) => {
props.setBaseLayer(e.target.parentElement.id);
**setBackground({ isSelected: !background.isSelected, item: e.target.parentElement.id });**
}} >
Choose this base layer
</button>
<div className="base-layer-tags-container">
{ item.tags.map(item => {
return   <h6 className="base-layer-tags" key={uuid()}>{ item }</h6>
}) }
</div>
</div>
}) }
</div>
);
}
export default BaseLayers;

Answer 1

它应该像将颜色逻辑线更改为

：

style={{ backgroundColor: (background.item === item.title && background.isSelected) ? 'blue' : 'red' }}

由于您使用的是项目的标题作为其 ID。如果您只想一次选择 1 个项目，则此逻辑将起作用。

不过，这有一个缺陷，如果你有 2 个具有相同标题的瓷砖，当你选择其中一个瓷砖时，两个都会变成蓝色！这是因为他们的ID(头衔(是相同的。为了解决这个问题，我建议您在创建项目时使用 UUID 向项目添加一个 ID。这也意味着您可以使用与密钥相同的 ID。