前言
我发现React和AngularJS思想完全不同，AngularJS是基于双向绑定，在Modal层中定制数据，然后双向改变。但是React是通过prop和state来改变view层的状态。下面是我写的一个轮播图组件，可以直接看一下。代码很简单。原理就是通过React在componentDidMount后改变setState，来动态改变css样式。
说明以下：看gif很卡，但是实际效果还是很好的。
以下是示例代码
LunBo.js
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
left
right
-
{this.props.children}
export default LunBo;
index.js
App.css
.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;
}
总结
通过React这一门框架的学习，你可以从它独特的新特性中发掘一种新的思维模式。以上就是这篇文章的全部内容，希望对大家的学习或者工作能带来一定的帮助，如果有疑问可以留言交流。
原文链接：https://www.f2er.com/js/46064.html