Javascript 如何使用React JS将样式应用于在数组中单击的图标

如何将样式应用于通过

.map

迭代的特定元素。当前，当我单击一个图标时，样式将应用于两个图标。我期待在点击图标时切换行为

这是我代码的要点

const [color, setColor] = useState(false);

...

{arr.map(({ icon, styledIcon }, index) => (
<Grid key={index} item>
  <IonIcon onClick={()=> setColor(!color)} key={index} icon={color ? icon : styledIcon} >
  </IonIcon>
</Grid>
))}

const[color，setColor]=useState（false）；
...
{arr.map（{icon，styledIcon}，index）=>(
setColor（！color）}key={index}icon={color？icon:styledIcon}>
))}

您可以将其向下移动到另一个组件中，以便轻松跟踪。如果您不想这样做，您将需要使用ID数组或其他方法来跟踪主状态

{arr.map(({ icon, styledIcon }, index) => (
<Grid key={index} item>
    <MyStyledIcon key={index} icon={icon} styledIcon={styledIcon} />
</Grid>
))}


const MyStyledIcon = (props) => {
   const [color, setColor] = React.useState(false);

  <IonIcon onClick={()=> setColor(!color)} icon={color ? props.icon : props.styledIcon} >
  </IonIcon>
}

{arr.map（{icon，styledIcon}，index）=>(
))}
const MyStyledIcon=（道具）=>{
const[color，setColor]=React.useState（false）；
setColor（！color）}icon={color？props.icon:props.styledIcon}>
}

您必须识别并拥有一个条件样式的应用程序。但很想知道它在拆分组件后是如何工作的，因为在

arr

中的所有项目之前，您只有一个color state变量。将其移动到自己的组件会为

arr