纯React实现轮播效果组件

最近在看React的文章，发现React和AngularJS思想完全不同，AngularJS是基于双向绑定，在Modal层中定制数据，然后双向改变。但是React是通过prop和state来改变view层的状态。下面是我写的一个轮播图组件，可以直接看一下。源码很简单。原理就是通过React在componentDidMount后改变setState，来动态改变css样式。稍后我会放到github上。<p>

1.gif

LunBo.js

require('styles/App.css');
require('normalize.css/normalize.css');

import React from 'react';
import ReactDOM from 'react-dom'

const LunBo=React.createClass({
  propsTypes:{
    interval:React.PropTypes.number,
    autoPlay:React.PropTypes.bool,
    activeIndex:React.PropTypes.bool,
    defaultActiveIndex:React.PropTypes.bool,
    direction:React.PropTypes.oneOf['right','left'],
    number:React.PropTypes.number,
    boxStyle:React.PropTypes.string,
  },
  getDefaultProps(){
    return{
      interval:3000,
      autoPlay:true,
      defaultActiveIndex:0,
      direction:'right'
    }
  },
  getInitialState(){
    return{
      activeIndex:this.props.defaultActiveIndex?this.props.defaultActiveIndex:0,
      direction:this.props.direction?this.props.direction:'right'
    }
  },
  componentDidMount(){
    this.autoPlay();
  },
  componentWillReceiveProps (){

  },
  componentWillUnmount(){
    clearInterval(this.timeOuter);
  },
  autoPlay(){
    if(this.props.autoPlay){
      if(this.props.direction==="right"){
        this.timeOuter=setInterval(this.playRight,this.props.interval);
      }else if(this.props.direction==="left"){
        this.timeOuter=setInterval(this.playLeft,this.props.interval);
      }
    }
  },
  playRight(indexIn){
      let index=indexIn?indexIn:this.state.activeIndex+1;
      console.log(index);
      if(index>this.props.number-1){
        index=0;
      }
      this.setState({
        activeIndex:index
      })
  },
  playLeft(indexIn){
      let index=indexIn?indexIn:this.state.activeIndex-1;
      console.log(index);
      if(index<0){
        index=this.props.number-1;
      }
      this.setState({
        activeIndex:index
      })
  },
  position(){
    switch (this.state.activeIndex){
      case 0:return "onePosition" ;
      case 1:return "twoPosition" ;
      case 2:return "therePosition" ;
      case 3:return "fourPosition";
    }
  },
  left(){
   clearInterval(this.timeOuter);
    let oldIndex=this.props.activeIndex;
    this.playLeft(oldIndex+1);
    this.autoPlay();
  },
  right(){
    clearInterval(this.timeOuter);
    let oldIndex=this.props.activeIndex;
    this.playRight(oldIndex-1);
    this.autoPlay();
  },
  render(){
    let{
        interval,
        autoPlay,
        activeIndex,
        defaultActiveIndex,
        direction,
        number,
        boxStyle
      }=this.props;
    return <div  className={boxStyle} >
      <span className="leftIcon" onClick={this.left}>left</span>
      <span className="rightIcon" onClick={this.right}>right</span>
        <ul className={this.position()}>
          {this.props.children}
        </ul>
      </div>
  }
});

export default LunBo;

index.js

import 'core-js/fn/object/assign';import React from 'react';
import ReactDOM from 'react-dom';
import LunBo from './components/Lunbo';
ReactDOM.render(<LunBo interval={100} number={4} boxStyle="content" interval={4000}  >  <li className="boxStyleLi">![](http://upload-images.jianshu.io/upload_images/971705-6d38b15221a904c9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>  <li className="boxStyleLi">![](http://upload-images.jianshu.io/upload_images/971705-1ebf3743a7d163c7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>  <li className="boxStyleLi">![](http://upload-images.jianshu.io/upload_images/971705-1158b127a710879a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>  <li className="boxStyleLi">![](http://upload-images.jianshu.io/upload_images/971705-2c8d6d5d8d3b59bc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li></LunBo> ,document.getElementById('app'));

App.css

.content{
  width: 400px;
  height: 400px;
  border: 3px solid saddlebrown;
  position: relative;
  overflow: hidden;
}
.content ul{
  display: block;
  width: 2500px;
  height: 100%;
  float:left;
  position: absolute;
  z-index: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.boxStyleLi{
  display: inline-block;
  width: 400px;
  height: 400px;
  float: left;
}
.boxStyleLi img{
  width: 100%;
  height: 100%;
}
.spanStyle{
  width: 500px;
  height: 400px;
  border: 3px solid #598b3a;
  background: #7177eb;
  position: relative;
}
.onePosition{
  left: 0;
}
.twoPosition{
  left: -400px;
}
.therePosition{
  left: -800px;
}
.fourPosition{
  left: -1200px;
}

.leftIcon{
  width: 50px;
  height: 50px;
  background: #cd4d5c;
  position: absolute;
  left: 0;
  top: 350px;
  text-align: center;
  line-height: 50px;
  z-index: 999;
}
.rightIcon{
  width: 50px;
  height: 50px;
  background: #f6403d;
  position: absolute;
  left: 350px;
  top: 350px;
  text-align: center;
  line-height: 50px;
  z-index: 999;
}