react轮播图

引入swiper插件：
var ComponentBanner=React.createClass({
    //设置默认的数据源
    getDefaultProps:function(){
        return {sourceUrl:
        'http://datainfo.duapp.com/shopdata/getBanner.php'}
    },
    //设置状态 存储变化的数据
    getInitialState:function(){
        return {result:[]}
    },
    //willmount里面去发送ajax请求
    componentWillMount:function(){
        var _this=this;
        Common.http(this.props.sourceUrl,function(data){
            console.log(typeof data);
            //jsonp ---- callback(json);
            var point=data.indexOf("(");
            var length=data.length;
            data=data.substring(point+1,length-1);
            data=JSON.parse(data);
            console.log(data);
            //把得到的数据放进result里面
            _this.setState({result:data});
        });
    },
    render:function(){
        //jsx支持叠加,jsx本身就是数组
        var s=[];//存储jsx叠加后的总的jsx结果 数组
        for(var i=0;i<this.state.result.length;i++){
        var img=JSON.parse(this.state.result[i].goodsBenUrl)[0];
            s.push(
"swiper-slide">
                       
                     
);
        }
        return(
            

               
"swiper-container">
                  
"swiper-wrapper">
                     {s}
                  
               
            
        );
    },
    componentDidUpdate:function(){
         var swiper=new Swiper('.swiper-container',{
            autoplay:1000,loop:true
         });
    }
});

使用react-swipe和swipe-js-iso
npm install react swipe-js-iso react-swipe
import React from 'react'
import './banner.less'
import ReactSwiper from 'react-swipe'
import banner1 from '../../img/banner1.png'
import banner2 from '../../img/banner2.png'
import banner3 from '../../img/banner3.png'
class Banner extends React.Component {
    constructor(prpos,context) {
        super(prpos,context);
        // this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        this.state = {
            index: 0
        }
    }
    render() {
        var opt = {
            auto: 2000,
            callback:function(index){
                this.setState({index:index})
            }.bind(this)
        }
        return (
            <div>
                "carousel" swipeOptions={opt}>
                    <div>
                        
                    div>
                    <div>
                        
                    div>
                    <div>
                        
                    div>
                
                <div className="index-container">
                    

                        
this.state.index === 0 ? "selected" : ''}>
                        
this.state.index === 1 ? "selected" : ''}>
                        
this.state.index === 2 ? "selected" : ''}>
                    
                div>
            div>
        )
    }
    componentDidMount() {

    }
}

export default Banner

less：
.index-container {
    height: 0px;
    position: relative;
    ul {
        width: 100%;
        height: auto;
        text-align: center;
        position: absolute;
        top:-20px;
    }
    li {
        display: inline-block;
        height: 9px;
        width: 9px;
        border-radius: 9px;
        background-color: #eee;
        margin: 0 5px;
    }
    li.selected {
        background-color: #009de4;
    }
}
.carousel{
    width: 100%;
    height: 5rem;
        img{
            height: 5rem;
            width: 100%
        }
}