javascript - 如何在每个图标上单独更改颜色？反应，样式化的组件

Question

我正在学习反应和样式组件。我堆栈试图单独更改每个图标的颜色。有什么解决办法吗？

这是我想要得到的：

https://i.stack.imgur.com/tsANO.jpg

这是我的代码示例：

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>

  );
};

标签： javascriptreactjsstyled-components

Answer 1

您实际上是在询问如何处理多个状态（因此与 无关styled-components），因为现在您对所有图标都有一个状态，您需要每个图标的状态。

这是一种可能的解决方案，管理单个图标状态数组：

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>
  );
};

• 查看类似问题