根据滑块索引位置更改类名

Question

我想根据使用React-slick-slider 的https://stackblitz.com/edit/react-slick-slider-issues 中选定的滑块数据索引位置更改className 。

假设如果用户将鼠标悬停在第一张图像上，图像数据索引值为 0，我想将图像推到滑块上方，并且onMouseOut图像将返回到滑块中的原始位置并对最后一张图像执行此操作好。

对于第一张和最后一张图像之间的所有图像，它们将被下推。 当前悬停在图像上，它们将被按下， onMouseOut它们将返回到滑块中的原始位置。

如果className默认为unique-image可以将 First Image 更改为unique-image First ，如果是最后一张图像，则className应为unique-image Last并且对于所有中间图像，它应为unique-image between . 这是可以实现的吗？

Answer 1

当您映射图像时，您可以使用三级运算符：

const images = [...something];

images.map((image, key) => <img className={`unique-image ${key === 0 ? "First" : key == images.length - 1 ? "Last" : ""}`} {...otherProps} />

因此，您使用 map 函数中的键来检查第一个和最后一个元素，并在到达时添加相应的类。