React刚出来不久，组件还比较少，不像jquery那样已经有很多现成的插件了，于是自己写了一个基于React的轮播效果组件，现在分享给大家，有需要的可以参考借鉴。
我发现React和AngularJS思想完全不同，AngularJS是基于双向绑定，在Modal层中定制数据，然后双向改变。但是React是通过prop和state来改变view层的状态。下面是我写的一个轮播图组件，可以直接看一下。代码很简单。原理就是通过React在componentDidMount后改变setState，来动态改变css样式。
说明以下：看gif很卡，但是实际效果还是很好的。
以下是示例代码
LunBo.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
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
|
1
2
3
4
|
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"></li> <li className="boxStyleLi"></li> <li className="boxStyleLi"></li> <li className="boxStyleLi"></li></LunBo> ,document.getElementById('app'));
|
App.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
.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;
} |
总结
通过React这一门框架的学习，你可以从它独特的新特性中发掘一种新的思维模式。以上就是这篇文章的全部内容，希望对大家的学习或者工作能带来一定的帮助，如果有疑问可以留言交流。