React，CSS：如何为每张卡片打开相应的模式窗口

Question

让我解释一下情况。目前我正在做一个项目来练习 SCSS 和 React。这是一个专门针对足球队的网站。问题是我正在使用 CSS 和 HTML 创建一个自定义模式窗口。我想要的是，每当我单击“查看图片”按钮时，应该打开与此卡相关的模态窗口，而在我的情况下，所有模态窗口都会同时打开。

同时打开的所有模态窗口彼此堆叠在一起。就这样。

总共有四个类似的模态窗口，但只显示顶部的模态窗口。 这些模态窗口的 HTML 结构如下：

他们有相同的类和ID。

在 React 部分，我有一个名为 PopUp 的组件，它从 db.json 获取信息作为道具。

import React from 'react';
import Button from './button-round-dark';

const generateAdditionalInfo = ({info}) => {
    if (info) {
        return info.map((item) => {
            const addInfo = item.additionalInfo;
            console.log(addInfo);
            return (
            <div className="popup" id="popup">
                <div className="popup__content" key={addInfo.id}>
                    <div className="popup__left">
                        <img className="popup__img" src={`../../${process.env.PUBLIC_URL}/images/additionalInfoPics/${addInfo.images[0]}`}/>
                        <img className="popup__img" src={`../../${process.env.PUBLIC_URL}/images/additionalInfoPics/${addInfo.images[1]}`}/>
                    </div>

                    <div className="popup__right">
                        <a href="#legend-team-section" className="popup__close">x</a>
                        <h2 className="heading-secondary u-margin-bottom-small">{addInfo.title}</h2>
                        <p className="popup__description">{addInfo.description}</p>
                    </div>
                </div>    
            </div>
            )
        })
    }
}


const PopUp = (props) => {
    return (
        <div>
            {generateAdditionalInfo(props)}
        </div>

    )
}

export default PopUp;

db.json

"legendaryTeam":[
      {
        "id":"p1",
        "name": "buffon",
        "image":"buffon.jpg",
        "years":"2001-2018",
        "number":"18",
        "position":"goalkeeper",
        "physicalFeatures":{
          "weight":"86",
          "height":"194",
          "speed":"7",
          "power":"250"
        },
        "additionalInfo":{
          "id":"1",
          "images":["buffon_1.jpg","buffon_2.jpg"],
          "title":"Buffon title",
          "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam dignissim diam quis enim lobortis scelerisque. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Lorem sed risus ultricies tristique nulla aliquet enim. Ultrices in iaculis nunc sed augue lacus viverra vitae congue."
        }
      },
      {
        "id":"p2",
        "name": "Ravanelli",
        "image":"ravanelli.jpg",
        "years":"1992-1996",
        "number":"10",
        "position":"forward",
        "physicalFeatures":{
          "weight":"75",
          "height":"176",
          "speed":"9",
          "power":"300"
        },
        "additionalInfo":{
          "id":"2",
          "images":["ravanelli_1.jpg","ravanelli_2.jpg"],
          "title":"Ravanelli title",
          "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam dignissim diam quis enim lobortis scelerisque. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Lorem sed risus ultricies tristique nulla aliquet enim. Ultrices in iaculis nunc sed augue lacus viverra vitae congue."          
        }
      }

请注意additionalInfo 对象，它是信息进入PopUp 组件的地方。

模态窗口的

自定义 CSS 代码如下所示。

.popup {
    height: 100vh;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    background-color: rgba($color-black,0.8);
    z-index:99999; 
    opacity: 0;
    visibility: hidden;
    transition:all .3s; 
    &:target {
        opacity: 1;
        visibility: visible;
    }
        &__content {
            @include centrify;
            width:75%;
            background-color: $color-white;
            box-shadow: 0 2rem 4rem rgba($color-black, .2);
            border-radius: 3px;
            display: table;
            overflow: hidden;
        }

        &__left {
            width:33.33333333%;
            display: table-cell;
        }

        &__right {
            width:66.666666666%;
            display: table-cell;
            vertical-align: middle;
            padding: 3rem 5rem;
        }

        &__img {
            display: block;
            width:100%;
        }

        &__description {
            font-size: 1.4rem;
            margin-bottom: 4rem;
        }
}

在目标选择器的帮助下打开模态窗口。现在我正在摸索如何实现我想要的。请帮帮我。你有什么想法？ 顺便说一下，其他模态窗口看起来像这样。但它们的堆栈较低，因此未显示。

如果你想修改我的项目，请点击here

要运行 react 见下图

要运行 db.json，您需要全局安装它

$ npm install -g json-server

然后运行它，见下图

要运行 SCSS，请参见下图

Answer 1

您的问题不在您的描述中，您将ButtonRoundDark 绑定到所有模态。您需要将onClick 事件添加到“查看图片”按钮。点击后，获取数据，显示模态。