是否有一种方法可以根据设备屏幕分辨率在React Swiper中有条件地显示slidesPerView ?

Question

<Swiper
slidesPerView={
window.innerWidth <= 550
? 1
: window.innerWidth <= 720
? 2
: window.innerWidth > 720
? 3
: 0
}
spaceBetween={30}
pagination={{
clickable: true,
}}
modules={[Pagination]}
className="mySwiper"
>
{cardApi.map((card) => (
<SwiperSlide>
<div key={card.name} className="testimonial__card">
<div className="testimonial__card-top">
<img src={card.profilePic} alt={card.name} />
<div>
<h4>{card.name}</h4>
<p>{card.position}</p>
</div>
</div>
<div className="testimonial__card-bottom">
<p>{card.comment}</p>
</div>
</div>
</SwiperSlide>
))}
</Swiper>

在上面的代码行中，我试图根据屏幕大小有条件地设置滑动器的幻灯片(为了使其响应)。目标是在一个(1280px)的屏幕上显示3张幻灯片，在一个(720px)及以下的屏幕上显示2张幻灯片，在一个(550px)及以下的屏幕上显示一张幻灯片。

上面共享的代码最终确实工作了，但那只是在我刷新页面之后。我希望有一个更好的方法来解决这个问题，在调整屏幕大小后，幻灯片会自动适应条件，而不必再次刷新页面。

Answer 1

根据其他人的建议，您需要设置一个侦听resize事件的eventListener。这可以在useEffect内完成。在调整大小时，它会设置每个视图的幻灯片数

设置slidesPerView的函数:

const setSlidesPerview = () => {
setSlides(
window.innerWidth <= 550
? 1
: window.innerWidth <= 720
? 2
: window.innerWidth > 720
? 3
: 0
);
}

useEffect:

React.useEffect(() => {
// Initially set the amount of slides on page load
setSlidesPerview();
// Add the event listener on component mount
window.addEventListener("resize", setSlidesPerview);
// Remove the listener on unmount
return () => {
window.removeEventListener("resize", setSlidesPerview);
};
}, []);

下面是一个关于codesandbox的例子:https://codesandbox.io/s/interesting-currying-uoxpw1?file=/src/App.js:538-772