每当我点击一个按钮时，我需要让我的反应模式改变背景颜色

Question

所以我有一个图像数组，每个都有一个可点击的覆盖图，我有一个根据我点击的覆盖图的名称改变背景颜色的模式，我想将其作为一个道具传递，但这是不可能的，因为图像是通过一个函数生成的，而模式是在函数之外，所以我不能给它赋值，这里需要的值如下所示：

这是我的JSON本地数据：

{
  "portfolio": [
    {
      "id": 1,
      "mid":1,
      "title": "react",
      "image": "/images/portfolio-2/React.jpg"
    },
    {
      "id": 2,
      "mid":2,
      "title": "angular",
      "image": "/images/portfolio-2/Angular.jpg"
    },
    {
      "id": 3,
      "mid":3,
      "title": "flutter",
      "image": "/images/portfolio-2/Flutter.jpg"
    },
    {
      "id": 4,
      "mid":4,
      "title": "bootstrap",
      "image": "/images/portfolio-2/Bootstrap.png"
    },
    {
      "id": 5,
      "mid":5,
      "title": "unity",
      "image": "/images/portfolio-2/Unity.jpg"
    },
    {
      "id": 6,
      "title": "photoshop",
      "image": "/images/portfolio-2/Photoshop.png"
    },
    {
      "id": 7,
      "title": "ionic",
      "image": "/images/portfolio-2/Ionic.png"
    },
    {
      "id": 8,
      "title": "wordpress",
      "image": "/images/portfolio-2/Wordpress.jpg"
    }
  ]
}

这是我的ReactJS代码：

import React, { useState, useEffect } from "react";
import axios from "axios";
import {
  PortfolioS,
  PortfolioTitle,
  Span,
  Box,
  ImageWrapper,
  Image,
  Overlay,
  OverlaySpan,
} from "./PortfolioStyle.jsx";
import { ProjectModal } from "./ModalStyle.jsx";

export default function Portfolio(props) {
  const [images, setImages] = useState([]);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    axios.get("Data/Data.json").then((res) => {
      setImages(res.data.portfolio);
    });
  }, []);

  const PortfolioImages = images.map((imageItem) => {
    return (
      <React.Fragment>
        <ImageWrapper key={imageItem.id}>
          <Image src={imageItem.image} alt="" />
          <Overlay name={imageItem.title}>
            <OverlaySpan
              name={imageItem.title}
              onClick={() => {
                setOpen(!open);
                test = imageItem.title;
              }}
            >
              View Projects
            </OverlaySpan>
          </Overlay>
        </ImageWrapper>
      </React.Fragment>
    );
  });

  return (
    <PortfolioS id={"portfolioSection"}>
      <div className="container">
        <PortfolioTitle>
          <Span>My</Span> Portfolio
        </PortfolioTitle>

        <Box>{PortfolioImages}</Box>

        <ProjectModal
          isOpen={open}
          onRequestClose={props.clearSelectedOption}
          ariaHideApp={false}
        >
          <h2>Modal Title</h2>
          <p> Just a test</p>
          <button
            onClick={() => {
              setOpen(!open);
            }}
          >
            Close test
          </button>
        </ProjectModal>
      </div>
    </PortfolioS>
  );
}

下面是我的第一个外部样式组件文件：

import styled from "styled-components";

export const PortfolioS = styled.div`
  margin-top: 150px;
  padding-top: 100px;
  background: #f8f8f8;
  margin-top: 300px;
  overflow: hidden;

  @media (max-width: 575px) {
    display: block;
    margin: auto;
  }
`;

export const PortfolioTitle = styled.h1`
  text-align: center;
  font-size: 35px;
  color: #1761a0;
`;

export const Span = styled.span`
  font-weight: normal;
  color: #eb5424;
`;

export const Box = styled.div`
  @media (max-width: 575px) {
    width: 100%;
  }
`;

export const ImageWrapper = styled.div`
  width: 25%;
  float: left;
  font-size: 0;
  position: relative;

  &:hover > div {
    opacity: 1;
  }
`;

export const Image = styled.img`
  width: 100%;
  @media (min-width: 576px) and (max-width: 768px) {
    width: 50%;
  }
`;

export const Overlay = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  font-size: 15px;
  opacity: 0;

  ${(props) => {
    if (props.name === "react") {
      return `
        background: rgba(0, 145, 255, 0.5);
    `;
    } else if (props.name === "angular") {
      return `
        background:  rgba(255, 0, 0, 0.5);
    `;
    } else if (props.name === "flutter") {
      return `
        background:  rgba(255, 255, 255, 0.5);
    `;
    } else if (props.name === "bootstrap") {
      return `
        background:  rgba(115, 0, 255, 0.5);
    `;
    } else if (props.name === "unity") {
      return `
        background:  rgba(255, 255, 255, 0.5);
    `;
    } else if (props.name === "photoshop") {
      return `
        background:  rgba(88, 150, 255, 0.5);
    `;
    } else if (props.name === "ionic") {
      return `
        background:  rgba(255, 255, 255, 0.5);
    `;
    } else {
      return `
        background: rgba(255, 255, 255, 0.5);
    `;
    }
  }}
`;

export const OverlaySpan = styled.span`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  padding: 10px 20px;
  cursor: pointer;
  border: 2px solid white;

  ${(props) => {
    if (props.name === "react") {
      return `
        background: #33ccff;
    `;
    } else if (props.name === "angular") {
      return `
        background: #ff0000;        
    `;
    } else if (props.name === "flutter") {
      return `
        background: #0099ff;
    `;
    } else if (props.name === "bootstrap") {
      return `
        background: #9900cc;
    `;
    } else if (props.name === "unity") {
      return `
        background: black;
    `;
    } else if (props.name === "photoshop") {
      return `
        background:  #3399ff;
    `;
    } else if (props.name === "ionic") {
      return `
        background: #1a8cff;
    `;
    } else {
      return `
        background: #0099cc;
    `;
    }
  }}
`;

第二个外部样式化组件文件：

import styled from "styled-components";
import Modal from "react-modal";

export const ProjectModal = styled(Modal)`
  margin: auto;
  margin-top: 200px;
  width: 250px;
  height: 300px;
  ${(props) => {
    if (props.names === "react") {
      return `
        background: #33ccff;
    `;
    } else if (props.names === "angular") {
      return `
        background: #ff0000;        
    `;
    } else if (props.names === "flutter") {
      return `
        background: #0099ff;
    `;
    } else if (props.names === "bootstrap") {
      return `
        background: #9900cc;
    `;
    } else if (props.names === "unity") {
      return `
        background: black;
    `;
    } else if (props.names === "photoshop") {
      return `
        background:  #3399ff;
    `;
    } else if (props.names === "ionic") {
      return `
        background: #1a8cff;
    `;
    } else {
      return `
        background: #0099cc;
    `;
    }
  }}
`;

Answer 1

你可以像这样传递一个属性来设置模式背景：

投资组合函数：

// Create a state for background type
const [backgroundType, setBackgroundType] = useState(null);

// In PortfolioImages => OverlaySpan => OnClick, set the image title for backgroundType
<OverlaySpan
   name={imageItem.title}
   onClick={() => {
      setBackgroundType(imageItem.title);
      setOpen(!open);
   }}
>

ProjectModal:

<ProjectModal
   backgroundType={backgroundType}
   isOpen={open}
   onRequestClose={props.clearSelectedOption}
   ariaHideApp={false}
>
  ....
</ProjectModal>

，最后是ModalStyles.js: (你的扩展名只能是.js，因为这不是一个react元素)

import styled from "styled-components";
import Modal from "react-modal";

// Instead doing that If's, i created a const to hold the backgroundcolors based on image title
const backgroundColor = {
  react: "#33ccff",
  angular: "#ff0000",
  flutter: "#0099ff",
  bootstrap: "#9900cc",
  unity: "black",
  photoshop: "#3399ff",
  ionic: "#1a8cff",
};

export const ProjectModal = styled(Modal)`
  margin: auto;
  margin-top: 200px;
  width: 250px;
  height: 300px;
  background: ${(props) => {
    // And here i set the specifc background color
    return props.backgroundType ? backgroundColor[props.backgroundType] : "#0099cc";
  }};
`;

希望对你有帮助。