React Styled Components - 如何更改地图功能中点击元素的颜色？

Question

我正在使用 map() 函数从 data.js 文件生成按钮，然后根据它们对应的 ID 更改页面的内容。如何使用 styled-components 更改当前选中的背景颜色？我希望整个事情仍然基于 map() 函数

Data.js

technology: [
    {
      id: 1,
      name: "Launch vehicle",
      images: {
        portrait: "../assets/technology/image-launch-vehicle-portrait.jpg",
        landscape: require("../assets/technology/image-launch-vehicle-landscape.jpg"),
      },
      description:
        "A launch vehicle or carrier rocket is a rocket-propelled vehicle used to carry a payload from Earth's surface to space, usually to Earth orbit or beyond. Our WEB-X carrier rocket is the most powerful in operation. Standing 150 metres tall, it's quite an awe-inspiring sight on the launch pad!",
    },
    {
      id: 2,
      name: "Spaceport",
      images: {
        portrait: "../assets/technology/image-spaceport-portrait.jpg",
        landscape: require("../assets/technology/image-spaceport-landscape.jpg"),
      },
      description:
        "A spaceport or cosmodrome is a site for launching (or receiving) spacecraft, by analogy to the seaport for ships or airport for aircraft. Based in the famous Cape Canaveral, our spaceport is ideally situated to take advantage of the Earth’s rotation for launch.",
    },
    {
      id: 3,
      name: "Space capsule",
      images: {
        portrait: "../assets/technology/image-space-capsule-portrait.jpg",
        landscape: require("../assets/technology/image-space-capsule-landscape.jpg"),
      },
      description:
        "A space capsule is an often-crewed spacecraft that uses a blunt-body reentry capsule to reenter the Earth's atmosphere without wings. Our capsule is where you'll spend your time during the flight. It includes a space gym, cinema, and plenty of other activities to keep you entertained.",
    },
  ],

Technology.js

export const NumberCircle = styled.div`
  height: 50px;
  width: 50px;
  border: 1px solid white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: white;
`;


function Technology() {
  const [toggle, setToggle] = useState({
    id: 1,
    name: "",
    images: {
      landscape: "",
    },
    description: "",
  });

  return (
    <>
      <Wrapper>
        <Title>
          <p style={{ marginRight: "10px", color: "grey", fontWeight: "bold" }}>
            03
          </p>
          <p>SPACE LAUNCH 101</p>
        </Title>

        <ImageContainer>
          <img src={toggle.images.landscape} alt="tech"></img>
        </ImageContainer>

        <CircleWrap>
          {data.technology.map((tech) => (
            <NumberCircle key={tech.id} onClick={() => setToggle(tech)}>
              {tech.id}
            </NumberCircle>
          ))}
        </CircleWrap>
      </Wrapper>
    </>
  );
}

Answer 1

您可以比较 id 并更改 className 或组件的样式

有了类名，可能是这样的，

//className props of NumberCircle component

className={toggle.id===tech.id?'selected':''}

你可以在使用css之后改变显示

使用内联样式，只需向您的组件添加样式属性：

style={toggle.id===tech.id?{ backgroundColor: 'blue'}:{}}

React Styled Components - 如何更改地图功能中点击元素的颜色？

React Styled Components - How to change color of clicked element in map function?

javascript

css

reactjs

styled-components