React根据props值显示图标

Question

我正在用React (TS)， NodeJS, mySQL构建一个度假项目，并试图根据道具(如果props === true或props>=1)保存和喜欢带有材料UI的图标。这些图标位于-div className="MenuContent"如何使一个函数来检查道具的值?尝试了几种方法都没有成功(错误)。这是我的Card组件:

import VacationModel from "../../../Models/VacationModel";
import appConfig from "../../../Utils/Config";
import "./VacationCard.scss";
import BookmarkIcon from '@mui/icons-material/Bookmark';
import FavoriteIcon from '@mui/icons-material/Favorite';
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import TurnedInNotIcon from '@mui/icons-material/TurnedInNot';
interface VacationCardProps {
vacation: VacationModel;
}
function VacationCard(props: VacationCardProps): JSX.Element {
return (
<div className="VacationCard">
<div className="Card">
<div className="Wrapper" style={{ backgroundImage: 
`url(${appConfig.vacationImagesUrl + props.vacation.imageName})` }}>
<div className="Header">
<div className="Date">
<p className="checkIn">Check In: {props.vacation.checkIn}</p>
<p className="checkOut">Check Out: {props.vacation.checkOut}</p>
</div>
<div className="MenuContent">
<ul>
<li><TurnedInNotIcon fontSize="small" /></li>
<li><FavoriteBorderIcon fontSize="small" /><span> 
{props.vacation.followersCount}</span> </li>
</ul>
</div>
</div>
<div className="Data">
<div className="Content">
<h1 className="Title">
{props.vacation.destination}
</h1>
<p className="Text">
Description: {props.vacation.description}
<br />
Price: {props.vacation.price}
</p>
</div>
</div>
</div>
</div>
</div>
);
}
export default VacationCard;

谢谢!

Answer 1

根据您的评论，如果props.vacation.followersCount === 0，则需要显示一个特定的图标，如果其大于或等于1，则需要显示另一个图标。你可以试试:

{vacation.props.followrs > 0 ? "show Your icon that you want for greater or equal to 1" : "show other icon }