我想在我的電影圖片上有一個覆蓋層。正如你所看到的，我已經把它添加為一個類，我用CSS設計了它，它應該可以工作，但我不知道為什么不行。一個小的黑色覆蓋應該會出現，上面寫著“添加到收藏夾”和氣球心圖標。

body {
  background: #141414;
  color: #ffffff;
}

.movie-app > .row {
  overflow-x: auto;
  flex-wrap: nowrap;
}

.image-container {
  position: relative;
  transition: transform 0.2s;
}

.image-container:hover {
  cursor: pointer;
  transform: scale(1.1);
}

App.scss
    .image-container:hover .overlay {
      opacity: 1;
    }
    
    .overlay {
      position: absolute;
      background: rgba(0, 0, 0, 0, 8);
      width: 100%;
      transition: 0.5s ease;
      opacity: 1;
      bottom: 0;
      font-size: 20px;
      padding: 20px;
      text-align: center;
    }

從& quot導入反應反應& quot；

addFavourites.js

const addFavourites = () => {
  return (
    <>
      <span className="mr-2">Add To Favourites</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="Red"
        class="bi bi-balloon-heart-fill"
        viewBox="0 0 16 16"
      >
        <path
          fill-rule="evenodd"
          d="M8.49 10.92C19.412 3.382 11.28-2.387 8 .986 4.719-2.387-3.413 3.382 7.51 10.92l-.234.468a.25.25 0 1 0 .448.224l.04-.08c.009.17.024.315.051.45.068.344.208.622.448 1.102l.013.028c.212.422.182.85.05 1.246-.135.402-.366.751-.534 1.003a.25.25 0 0 0 .416.278l.004-.007c.166-.248.431-.646.588-1.115.16-.479.212-1.051-.076-1.629-.258-.515-.365-.732-.419-1.004a2.376 2.376 0 0 1-.037-.289l.008.017a.25.25 0 1 0 .448-.224l-.235-.468ZM6.726 1.269c-1.167-.61-2.8-.142-3.454 1.135-.237.463-.36 1.08-.202 1.85.055.27.467.197.527-.071.285-1.256 1.177-2.462 2.989-2.528.234-.008.348-.278.14-.386Z"
        />
      </svg>
    </>
  );
};

export default addFavourites;

App.js

import logo from "./logo.svg";
import "./App.css";
import React, { useEffect, useState } from "react";
import MovieList from "./components/MovieList";
import MovieListHeading from "./components/MovieListHeading";
import addFavourites from "./components/addFavourites";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";

import SearchBox from "./components/SearchBox";
function App() {
  const [movies, setMovies] = useState([]);
  const [searchValue, setSearchValue] = useState("");
  const getMovieRequest = async (searchValue) => {
    const url = `https://www.omdbapi.com/?s=${searchValue}&apikey=9e9922`;

    const response = await fetch(url);
    const responseJson = await response.json();

    if (responseJson.Search) {
      setMovies(responseJson.Search);
    }
  };

  useEffect(() => {
    getMovieRequest(searchValue);
  }, [searchValue]);

  return (
    <div className="container-fluid movie-app">
      <div className="d-flex align-items-center mt-4 mb-4">
        <MovieListHeading heading="Movies" />
        <SearchBox searchValue={searchValue} setSearchValue={setSearchValue} />
      </div>
      <div className="d-flex flex-row bd-highlight mb-3">
        <MovieList movies={movies} favouriteComponent={addFavourites} />
      </div>
    </div>
  );
}

export default App;

MovieList.js

import React from "react";
const MovieList = (props) => {
  const favouriteComponent = props.favouriteComponent;
  return (
    <>
      {props.movies.map((movie, index) => (
        <div className="image-container d-flex justify-content-start m-3">
          <img src={movie.Poster} alt="movie"></img>
          <div className="overlay d-flex align-items-center justify-content-center"></div>
          <favouriteComponent />
        </div>
      ))}
    </>
  );
};

export default MovieList;

首先，在React中組件要用PascalCase命名。其次，不如把他們當{孩子}傳，而不是用道具傳。也許你的組件沒有被React解釋為組件，這就是為什么它沒有被渲染。此外，提供控制臺信息將是偉大的