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

Posted 2023-02-22

【中文标题】试图弄清楚如何根据特定书籍的类型更改背景图像

【英文标题】：Trying to figure out how to change background image depending on the genre of that particular book REACT

【发布时间】：2020-09-18 04:19:49

【问题描述】：

*我目前正试图弄清楚如何更改我的书--容器--小说的背景图像。我有三张不同的图片，根据书的类型，我想更改这些图片，但我不确定如何做到这一点。任何帮助都会很棒:) 我认为这类似于执行 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;

【参考方案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;

【讨论】：

非常感谢您的帮助 Lakshya Thakur :) 非常感谢。我只写了 5 个月的代码，所以还在努力解决问题?再次感谢您