利用 React Swiper 封装轮播图组件

1.组件需求：

1. 封装一个react的轮播图组件。
2. 轮播图里边可以自定义图片数量，和图片

2.上代码

import React, { Component } from 'react'
import Swiper from 'swiper'
import 'swiper/css/swiper.css'

export default class Swiperself extends Component {
  render() {
    return (
      <div className="swiper-container">
        <div className="swiper-wrapper">
        	{this.props.children}
        </div>
      </div>
    )
  }
  componentDidMount() {
    new Swiper('.swiper-container', {
      loop: true
    })
  }
}

3.引用自己封装的轮播图组件

import React, { Component } from 'react'
import Swiperself from './Swiperself.js'

export default class App extends Component {
  render() {
    return (
      <div>
        <Swiperself>
          <div className="swiper-slide">11111</div>
          <div className="swiper-slide">22222</div>
          <div className="swiper-slide">33333</div>
        </Swiperself>
      </div>
    )
  }
}