React上的Swiper Js不会在刷新时初始化，但在文档被编辑或保存时会初始化

Question

如标题所示，每当我刷新页面滑块时，它不会初始化，但当我编辑或保存文档时，它会初始化。

这是演示链接

当你第一次链接时，应该会看到它被破坏了，但如果你键入或保存文档，它会正常初始化。

提前感谢您的帮助。

Answer 1

在useEffect挂钩中添加您的swiper

请参阅示例链接：https://codesandbox.io/s/swiper-slider-r9hcym

import React, { useEffect } from "react";
import Swiper from "swiper";
import CardItem from "./Card";
let imgs = [
"https://healthjade.com/wp-content/uploads/2017/10/apple-fruit.jpg",
"https://5.imimg.com/data5/VY/QT/MY-51857835/banana-fruit-500x500.jpg",
"https://envato-shoebox-0.imgix.net/3de2/a6a4-c604-4b82-adae-332bfef74989/_M2_9019.jpg?auto=compress%2Cformat&fit=max&mark=https%3A%2F%2Felements-assets.envato.com%2Fstatic%2Fwatermark2.png&markalign=center%2Cmiddle&markalpha=18&w=700&s=54c7d180307a289c503e93a54a7987a5"
];
function Card() {
useEffect(() => { // <-- Here
const swiper = new Swiper(".swiper", {
slidesPerView: 5,
spaceBetween: 20,
loop: true
});
}, []);
return (
<div className="swiper container mx-auto my-5 !pl-5 !pr-1 ">
<div className="swiper-wrapper">
<CardItem
image={imgs[0]}
rating={"2.5"}
desc={"Life lessons with Katie Zaferes"}
price={"130"}
status={"Online"}
count={"30"}
country={"USA"}
/>
<CardItem
image={imgs[1]}
rating={"3.6"}
desc={"Learn wedding photography"}
price={"160"}
count={"6"}
country={"UK"}
/>
<CardItem
image={imgs[2]}
rating={"4.7"}
desc={"Group Mountain Biking"}
price={"180"}
count={"12"}
country={"CA"}
/>
</div>
</div>
);
}
export default Card;

Answer 2

只要导入import 'swiper/css'，它就会像魔术一样工作。