关于react.js:在react中使用swiperjsv6

因为自己最近在应用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])