使用react+swiper实现简单的banner效果

React + swiper 的 banner

import React from 'react'

import Swiper from 'swiper'

const Item = ( props ) => { 
  //props.item.src
  //props.src
  return (
    <div className="swiper-slide">
      <img src = { props.src }/>
    </div>
  )
}

class Banner extends React.Component{

  constructor () {
    super()
    this.state = {
      banners: []
    }
  }

  renderItem = () => {
    return this.state.banners.map( ( item ) => {
      return <Item { ...item } key = { item.id }></Item>
      // return <Item item = { item }></Item>
    })
  }

  render () {
    return (
      <div className="swiper-container" ref = { el => this.swiper = el}>
          <div className="swiper-wrapper" >
              { this.renderItem()  }
          </div>
          <div className="swiper-pagination"></div>
          
          <div className="swiper-button-prev"></div>
          <div className="swiper-button-next"></div>
          
          <div className="swiper-scrollbar"></div>
      </div>
    )
  }

  componentDidMount () {
    fetch ( '/data.json' )
      .then( res => res.json() )
      .then( data => {
        
        this.setState({
          banners: data
        })
        /* 
          方案二
        */
        setTimeout ( () => {
         this.swiperObj = new Swiper ( this.swiper, {
           loop: true, // 循环模式选项
           
           // 如果需要分页器
           pagination: {
             el: '.swiper-pagination',
           },
           
           // 如果需要前进后退按钮
           navigation: {
             nextEl: '.swiper-button-next',
             prevEl: '.swiper-button-prev',
           },
           
           // 如果需要滚动条
           scrollbar: {
             el: '.swiper-scrollbar',
           }
         },0)
        })
      })
      .catch( error => {
        if( error ) throw error 
      })

  }

  componentDidUpdate () {

    /* 
      方案一

    */

    if( this.swiper ) return false

    // this.swiperObj = new Swiper ( this.swiper, {
    //   loop: true, // 循环模式选项
      
    //   // 如果需要分页器
    //   pagination: {
    //     el: '.swiper-pagination',
    //   },
      
    //   // 如果需要前进后退按钮
    //   navigation: {
    //     nextEl: '.swiper-button-next',
    //     prevEl: '.swiper-button-prev',
    //   },
      
    //   // 如果需要滚动条
    //   scrollbar: {
    //     el: '.swiper-scrollbar',
    //   }
    // })
  }

}

export default Banner