react_react引用Swiper中的一些问题 react使用Swiper中的grid遇到的一些问题

当你的grid排列不好的时候，请你静下心来关闭网易云

去看一下子元素的高度，跟引用霍初始化方式无关

当你的swiper突然出现你不可掌控的状态时，去看看必然存在的另外的Swiper，请给他们各自一个专属的类名。

下面代码希望能够有一些启示，相信自己。

//注册好组块
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Grid, FreeMode } from "swiper";


//引入一些必要的样式
import 'swiper/css';
import 'swiper/css/grid';
import 'swiper/css/free-mode';


//提前安装需要使用的模块 这里我使用的是自由模式
SwiperCore.use([FreeMode]);


//reader中的引入情况
<Swiper
        module={[Grid, FreeMode]}
        slidesPerView={2.1}
        freeMode={true}
        grid={{ rows:3, fill: "column" }}
        style={{ height: "350px",width:"100%" }}
        className="他一个属于他的类名，style等请根据此类名调整"
      >
        {
          homePageSwiperData.map((homePageSwiperDataObj) => {
            return (
              <SwiperSlide key={nanoid()}>
                .....
              <SwiperSlide>
</Swiper>