试图弄清楚如何根据特定书籍的类型更改背景图像

Question

*我目前正试图弄清楚如何更改我的书--容器--小说的背景图像。我有三张不同的图片，根据书的类型，我想更改这些图片，但我不确定如何做到这一点。任何帮助都会很棒:) 我认为这类似于执行 if 语句。我只是不知道该怎么做

  if(book.genre === "fiction") {
           return <div className="book--container--fiction"></div>
   } else if (book.genre === "non-fiction"){
           return <div className="book--container--non-fiction"></div>
    } else{
           return <div className="book--container--children"></div>
      }

*

import React from "react";
import "../stylesheets/Book.scss";
import { FiHeart } from "react-icons/fi";
import { Link } from "react-router-dom";
import isBookInWishlist from "../helper/isBookInWishList";

function Book({ book, handleSelectBook, handleSelectWishList, wishlist }) {
  return (
    <React.Fragment>
      <div className="book--container--fiction">
        <div className="book--wrapper">
          <div className="book--image">
            <img
              src={book.url}
              alt={book.title}
              className="book--image-style"
            />
          </div>
          <div className="book--content--wrapper">
            <div className="book--text--information">
              <h3>
                {book.title}
                <button
                  onClick={() => handleSelectWishList(book)}
                  className={
                    isBookInWishlist(book, wishlist)
                      ? "wishlist--icon orange"
                      : "wishlist--icon"
                  }
                >
                  <FiHeart />
                </button>
              </h3>

              <p>{book.author}</p>
              <p>{book.genre}</p>
              {/* <p>{book.desc}</p> */}
              <p className="book--price--style"> &euro; {book.price}</p>
            </div>
            <Link
              to="/productdetails"
              className="view--book--button"
              onClick={() => handleSelectBook(book)}
            >
              View Book
            </Link>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}
export default Book;

Answer 1

你可以像这样在 JS 中使用模板字面量：-

import React from "react";
import "../stylesheets/Book.scss";
import { FiHeart } from "react-icons/fi";
import { Link } from "react-router-dom";
import isBookInWishlist from "../helper/isBookInWishList";

function Book({ book, handleSelectBook, handleSelectWishList, wishlist }) {
  return (
    <React.Fragment>
      <div className={`book--container--${book.genre}`}>
        <div className="book--wrapper">
          <div className="book--image">
            <img
              src={book.url}
              alt={book.title}
              className="book--image-style"
            />
          </div>
          <div className="book--content--wrapper">
            <div className="book--text--information">
              <h3>
                {book.title}
                <button
                  onClick={() => handleSelectWishList(book)}
                  className={
                    isBookInWishlist(book, wishlist)
                      ? "wishlist--icon orange"
                      : "wishlist--icon"
                  }
                >
                  <FiHeart />
                </button>
              </h3>

              <p>{book.author}</p>
              <p>{book.genre}</p>
              {/* <p>{book.desc}</p> */}
              <p className="book--price--style"> &euro; {book.price}</p>
            </div>
            <Link
              to="/productdetails"
              className="view--book--button"
              onClick={() => handleSelectBook(book)}
            >
              View Book
            </Link>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}
export default Book;