React中swiper的配置（reactjs-swiper）

React中reactjs-swiper的使用与入坑

React中reactjs-swiper的使用与入坑
本文最先参考了https://www.cnblogs.com/cbp-jltx/p/9681838.html
但是，也不知道什么原因，swiperOptions始终不起作用，不知道是不是我自己的原因，但是通过一番摸索，我自己弄出了一套可行的办法。

总共分为六个步骤：
第一步：

//npm install reactjs-swiper;

// 先安装 reactjs-swiper;
npm install reactjs-swiper;

第二步：
找到该模块的Reactswiper模块：

第二步：
修改swiper选项

相关代码：

// 先安装 reactjs-swiper;
var swiperOptions = showPagination ? {
        pagination: '.swiper-pagination',
        ..._props.swiperOptions
 } : {..._props.swiperOptions};

第三步：
去除严格模式

直接将<React.StrictMode></React.StrictMode>标签去除即可

第四步：
引入ReactSwiper ， 配置state，也就是swiper的数据源，也可以通过props获取

import ReactSwiper from 'reactjs-swiper'

item 和swiperOptions的配置

this.state ={
	items :[{
    image: 'http://....jpg1',
    title: '图1',
    link: 'http://jd.com'
  }, {
    image: 'http://....jpg2',
    title: '图2',
  }, {
    image: 'http://....jpg3',
    title: '图3',
    link: 'http://jd.com'
  }, {
    image: 'http://....jpg4',
    title: '图4',
  }],
  swiperOptions:{
	preloadImages: true,
	autoplay: 4000,
	autoplayDisableOnInteraction: false,
	spaceBetween :0,
    }
}
 

这里面主要有两个一个是items 另一个是swiperOptions，第一个是图片的数据源，第二个是swiper的相关配置

最后一步，挂载组件

代码：

<ReactSwiper swiperOptions={this.state.swiperOptions} showPagination items={this.state.items}
                 className="swiper-example" />

写在最后：
这是第一次写博客，有不对的地方还望指出来，我一定会虚心学习，谢谢大家的采纳！