在react中使用swiper.js(v6)

因为本人最近在使用react写mobile websites的时候需要用到滑动翻页的效果，于是想到找一个swiper来使用,然后看了几篇文章，大多都是在componentDidMount中使用new实例化的方式引入Swiper,自己使用的使用发现这些文章的内容只能实现手动滑动，于是就自己探索了一下，然后终于找到了解决办法。不多说，直接上代码吧

import React from 'react';
import PropTypes from 'prop-types';
import SwiperCore, { Pagination, Scrollbar, A11y, EffectCoverflow, EffectCube, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
// import 'swiper/swiper-bundle.css';
import 'swiper/swiper.scss';
// import 'swiper/components/navigation/navigation.scss'; // 上下页箭头样式
import 'swiper/components/pagination/pagination.scss';
// import 'swiper/components/scrollbar/scrollbar.scss'; //滚动 条样式
import '../../style/_swiper-rewrite.scss'; // 重写的swiper样式

import styles from './index.module.scss';

SwiperCore.use([Pagination, Autoplay, EffectCoverflow, EffectCube])

export default class MySwiper extends React.Component {

  static propTypes = {
    picPageArr: PropTypes.array
  }

  slideConfig = {
    tag: 'section',
    wrapperTag: 'ul',
    spaceBetween: 50, // 两个slide的间距
    slidesPerView: 1,
    loop: true,
    speed: 800,
    effect: 'coverflow',
    autoplay: {delay: 6000},
    pagination: { clickable: true },
    // scrollbar:{ draggable: true },
    onSwiper: (swiper) => console.log(swiper),
    onSlideChange: () => console.log('slide change')
  }

  renderSlide = () => {
    const { picPageArr } = this.props
    return (
      picPageArr.map((item, index) => {
        return (
          <SwiperSlide tag='li' key={`slide${index + 1}`}>
            {item.map((innerItem, idx) => {
              return (
                <div key={idx}>
                  <img src={innerItem.card} className={styles.mobilePic} />
                </div>
              );
            })}
          </SwiperSlide>
        )})
    )
  }

  render() {
    return (
      <Swiper
        {...this.slideConfig}
      >
        {this.renderSlide()}
      </Swiper>
    )
  }
}

v6版本是直接就能引入Swiper组件（之前的版本没去了解^_^），关键的代码其实就一行，希望能帮助到后来者。

SwiperCore.use([Pagination, Autoplay, EffectCoverflow, EffectCube])