Javascript 如何分别单击每个图标后更改颜色？反应，样式化组件

我正在学习react和样式化组件。我试图改变每一个图标的颜色分别堆栈。有什么解决办法吗

以下是我想要得到的：

以下是我的代码示例：

import React, { useState } from "react";
import styled from "styled-components";
import {
  GiSteak,
  GiCheeseWedge,
  GiFlatfish,
  GiChickenOven,
  GiBroccoli,
} from "react-icons/gi";

const StyledDiv = styled.div`
  width: 300px;
  div {
    font-size: 30px;
    color: #828282;
    color: ${({ color }) => (color ? "green" : "lightGrey")};
  }
`;

const Selections = () => {
  const [color, setColor] = useState(false);
  return (
    <StyledDiv color={color} onClick={() => setColor(!color)}>
      <p>Select your options</p>
      <div>
        <GiBroccoli />
        <GiCheeseWedge />
        <GiSteak />
        <GiFlatfish />
        <GiChickenOven />
      </div>
    </StyledDiv>

  );
};

---

实际上，您正在询问如何处理与样式化组件无关的多个状态，因为现在所有图标都有一个状态，每个图标都需要一个状态

以下是一种可能的解决方案，即管理单个图标阵列状态：

const Icon = styled.div`
  background-color: ${({ isColored }) => (isColored ? "green" : "lightGrey")};
`;

const StyledDiv = styled.div`
  width: 500px;
  .icon__box {
    display: flex;
    ${Icon} {
      border: 1px solid black;
      font-size: 30px;
      margin-right: 10px;
    }
  }
`;

const Icons = () => {
  const [areColored, setColor] = useState(Array(5).fill(false));
  console.log(areColored);
  return (
    <StyledDiv>
      <p>Select your options</p>
      <div className="icon__box">
        {areColored.map((isColored, index) => (
          <Icon
            key={index}
            isColored={isColored}
            onClick={() =>
              setColor((prev) => {
                const res = Object.assign([], prev, { [index]: !prev[index] });
                return res;
              })
            }
          >
            icon {index + 1}
          </Icon>
        ))}
      </div>
    </StyledDiv>
  );
};

嘿，您可以使用图标状态来存储对象结构，如{index:1，color:true}。再加上第n个孩子。。。css选择器将允许您完成以下任务：-

import React, { useState } from "react";
import styled from "styled-components";

const StyledDiv = styled.div`
  width: 500px;
  .icon__box{
    display: flex;
    div {
      border: 1px solid black;
      font-size: 30px;
      margin-right: 10px;
      background-color:lightgrey
    }
    div:nth-child(${({icon})=>icon.index+1}){
      background-color: ${({ icon }) => (icon.color ? "green" : "lightGrey")};
    }
  }
`;

const Icons = () => {
  const [icon, setIcon] = useState({index:0,color:false});
  const [icons] = useState(['icon1','icon2','icon3','icon4','icon5']);
  const handleClick=(index)=>{
     let newIcon = {...icon}
     newIcon.color = index!==newIcon.index?true:!newIcon.color;
     newIcon.index = index;
     setIcon(newIcon);
  }

  return (
    <StyledDiv icon={icon}>
      <p>Select your options</p>
      <div className="icon__box">
        {icons.map((icon,index)=>(<div onClick={()=>handleClick(index)}>{icon}</div>))}
      </div>
    </StyledDiv>
  );
};

export default Icons;

这是分叉的一个：-

---

注意：在这里，我为每个图标div的文本内容创建了一个图标状态。如果您从道具派生出上面的内容，它将以相同的方式工作。所以这取决于你。

投票支持添加沙箱，祝你好运！对不起，我问错问题了。我是编程新手。啊，我明白了。您已经更新了您的问题。@Dennis解决方案应该有效。