关于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])