为什么当我点击图像时我的模态没有在屏幕上渲染？

Question

我在 React 上编写了一个简单的实现，其中包含一组项目。 每个项目都有自己的属性。 我编写了一个模式，每次有人单击图像时，它都必须在屏幕上呈现。 现在该模式不会出现在屏幕上。 我试图找出问题的原因和问题，但不幸的是我不能。 这是实现和 CSS：

function Projects() {const [selectedProject, setSelectedProject] = useState(null);

    const projects = [
        { id: 1, title: "ShoeWarma", image: Showarma, description: "Description of Project 1" },
        { id: 2, title: "Simon Game", image: SimonGame, description: "Description of Project 2" },
    ];

    const handleImageClick = (projectId) => {
        setSelectedProject(projectId);
    };

    const closeModal = () => {
        setSelectedProject(null);
    };

    return (
        <section id="projects" className="Projects-section">
            <div className="overlay" style={{ backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})` }}></div>
            <div className="project-grid">
                {projects.map(project => (
                    <div key={project.id} className="project-card">
                        <h3>{project.title} </h3>
                        <img src={project.image} alt={project.title} onClick={() => handleImageClick(project.id)} />
                    </div>
                ))}
            </div>
            {selectedProject && (
                <div className="modal" onClick={closeModal}>
                    <div className="modal-content">
                        <h3>{projects[selectedProject - 1].title}</h3>
                        <img src={projects[selectedProject - 1].image} alt={projects[selectedProject - 1].title} />
                        <p>{projects[selectedProject - 1].description}</p>
                    </div>
                </div>
            )}
        </section>
    );
}

export default Projects;

这是CSS：

.project-card img {
    max-width: 55%;
    max-height: 55%;
    width: auto;
    height: auto;
    border: 2px solid #fff;
    border-radius: 15px;
    transition: all 0.5s ease;


}

.project-card img:hover {
    transform: scale(1.1);
    border: 2px solid #fff;
    border-radius: 15px;
}

.project-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.project-card {
    flex: 0 0 calc(33.33% - 20px);
    margin: 10px;
    text-align: center;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    padding-top: 60px;
}


.modal-content {

    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

我已经控制台记录了handleimgclick并且它工作了，每次我点击img它都会控制台特定项目的id。 我也尝试控制台记录项目数组，一切都很好

Answer 1

在我看来，模态不是有条件渲染的。仅当

selectedProject

状态不为空时才应呈现模态。您可以通过将 selectedProject 的

console.log

添加到渲染方法来检查这一点。