我有这个代码。这个数据数组的长度是根据数据的变化。我想根据每个数组的最后剩余元素的样式。长度% 5。但我找不到一个解决方案与css。
<div className={styles.container}>
{data?.cast.map((movie) => {
const mod = data.cast.length%5
return (
<div
key={movie.id}
className={styles.container_card}
style={{ "--n": mod } as React.CSSProperties}
>
<MovieCard
credit={movie}
categoryType={keys}
genreId={movie.genre_ids[0]}
/>
</div>
);
})}
</div>
I am using Scss. I am trying to write a css like example below.
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
&_card {
width: 20%;
position: relative;
&:hover:nth-last-child( array.length % 5 ) {
transform: translateY(-200px);
}
}
}
2条答案
按热度按时间5cg8jx4n1#
要获得表示余数的最后n项,可以执行以下操作:
那么,现在我们如何将其应用到CSS中的样式中呢?您可以向
className
添加一个类,也可以在React中使用style
属性。其思想是,只有当您正在迭代的项在剩余项的列表中时,才添加该类或样式。
下面是一个简单的例子,它看起来像什么。这是没有优化,但你得到的想法:
lastItems在每次迭代中保持不变,因此您可以将其移到循环之外。另外,考虑使用
clx
或classnames
npm包,它们对于切换类非常有用。hof1towb2#
用户可以在此代码中使用slice。请查看以下代码以供参考:
不管data. cast的长度如何,上面的代码都将显示最后五个元素。
如果它不工作,请让我知道我一定会帮助。
快乐编码!!