The easiest I think would be to add some class, let's say unavailable
to the image that is unavailable.(我认为最简单的方法是添加一些类,比如说对于unavailable
的图像不可用。)
{orderedPosts.map(post => (
<div key={post.id}>
<div className="tile">
<img className={`tile-image ${!post.availability ? "unavailable" : ""}`} src={post.img} alt=""/>
</div>
</div>
))
}
and then in your CSS:(然后在您的CSS中:)
.unavailable {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…