react中swiper4.x轮播图的使用

网上找了好久在react中使用swiper的方法，大部感觉写的都好乱，所以干脆自己总结一下适用自己的方法。
注：这里只写使用方法，里面的原理还需要自己去其他地方学习。

参考：
Swiper官网：https://www.swiper.com.cn/usage/index.html
Winter Zhong：https://php.ctolib.com/article/wiki/81427

1.安装 Swiper

npm install --save swiper

2.引入Swiper（如果不这么引js文件会出错，问题始终找不出来让我崩溃了好久）

import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'

3.HTML内容

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外

4.你可能想要给Swiper定义一个大小，当然不要也行

.swiper-container {
    width: 600px;
    height: 300px;
}  

5.初始化Swiper

new Swiper ('.swiper-container', {
    loop: true,  //循环
    autoplay: {   //滑动后继续播放（不写官方默认暂停）
        disableOnInteraction: false,
    },
    pagination: {  //分页器
        el: '.swiper-pagination'
    }
})

以上是一个最简单的轮播图实现。但只能渲染同步数据。也就是说通过异步请求回来的数据会渲染出错，导致轮播图只显示一张图片，无其他功能。

解决方法一：
在初始化Swiper中插入：observer: true,
官方解释：https://www.swiper.com.cn/api/observer/218.html

解决方法二：
把初始化Swiper写在setState的第二个参数中，这样写的作用就是当异步数据请求回来后就会通过回调函数调用第二个参数

this.setState({
            list:res.data
        },
            ()=>{
                new Swiper ('.swiper-container', {
                    loop: true,
                    autoplay: {
                        disableOnInteraction: false,
                    },
                    pagination: {
                        el: '.swiper-pagination'
                    }
                })  
            }     
        )