javascript - 试图弄清楚如何根据特定书籍的流派来更改背景图像
问题描述
*我目前正在尝试弄清楚如何更改我的书--容器--小说的背景图像。我有三个不同的图像,根据书的类型,我想更改这些图像,但我不确定如何做到这一点。任何帮助都会很棒:) 我认为这类似于执行 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"> € {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;
解决方案
您可以像这样在 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"> € {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;
推荐阅读
- php - 使用 Select 表单过滤使用 PHP 从 MySQL 查询的表
- javascript - 在 Python 中读取导出的 Javascript 对象
- struts2 - 如何将变量传递给 s:text?
- node.js - 需要帮助建立 nodejs (NPM) localhost https
- uwp - 升级到 Win10 1803 后无法“dotnet restore”,失败并出现错误 MSB4019,即使在空白项目上也是如此
- javascript - 无法在模式中刺激 Input 的变化:React-Redux
- android - 将按钮更改为以编程方式舍入
- karate - 我也可以对 Json Api 请求使用以下相同的功能吗
- python - 如何在压缩和解压缩文件夹中搜索特定行
- c# - 是否可以将后代对象的集合作为 .NET Core 中的视图模型传入?