Swiper:is undefined;在react中,因为引入cdn的方式,

在react中,
读取JS顺序:

1. -> 组件中的js( 若组件中有 import引入模块,会按组件中import顺序,先读这个import导入的模块 )

2. -> 引入的模块

3. -> 外部js(如cdn)

弄清这个之后,再来看swiper中;
再js中写一段代码来执行触发一些效果(下面这段代码是从swiper官网复制过来的)

 <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false
    });
    </script>

因为是外部引入 cdn ,是最后执行,而内部写的JS代码会先执行,所以会找不到Swiper 对象 所以,会报错,未定义;

解决的方法:
可以通过

npm install swiper

下载模块,再到,刚刚那段JS代码之前,引入Swiper

import Swiper from 'swiper'

再次读的时候,就不会报错了;
总得问题,就是react生命周期,还有执行顺序不理解