使用反应实现轮播效果组件示例代码

前言

我发现反应和AngularJS思想完全不同，AngularJS是基于双向绑定，在情态的层中定制数据，然后双向改变。但是反应是通过支柱和状态来改变视角层的状态。下面是我写的一个轮播图组件，可以直接看一下。代码很简单。原理就是通过反应在组件安装后改变setState，来动态改变钢性铸铁样式。

说明以下：看可交换的图像格式很卡，但是实际效果还是很好的。

以下是示例代码

LunBo.js

需要(' style/app。CSS ')；需要(' normalize。CSS/normalize。CSS ')；从“反应”导入做出反应；从“react-DOM”const LunBo=react。创建类({ 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 { active index : this。道具。defaultactiveindex？这个。道具。defaultactiveindex :0，方向：这个。道具。方向？这个。道具。方向： '右' }，组件确实挂载了(){ this。autoplay()；}，组件willerceptops(){ }，组件willeunmount(){ clearInterval(this。时间外层)；}，autoPlay(){ if(this。道具。自动播放){ if(this。道具。方向=='右'){这个。time outer=setInterval(这。playright，这个。道具。间隔)；} else if(这个。道具。方向==='左'){这个。time outer=setInterval(这。向左走，这个。道具。间隔)；} } }，playRight(indexIn){ 0让index=indexIn？索引在：这个。国家。活动索引1；console.log(索引);if(索引这个。道具。number-1){ index=0；}这个。setstate({ active index : index })}，playLeft(indexIn){ 0让index=indexIn？索引在：这个。国家。活动索引-1；console.log(索引);if(index 0){ index=this。道具。数字-1；}这个。setstate({ active index : index })}，position(){ switch(this。国家。activeindex){ case 0:返回“一个位置”；案例1:返回“两个位置”；案例2:返回”重新录制”；案例3:返回“四个位置”；} },左(){ clearInterval(这个。时间外层)；让oldIndex=这个。道具。activeindex这个。play left(oldIndex 1)；这个。autoplay()；},右(){ clearInterval(这个。时间外层)；让oldIndex=这个。道具。activeindex这个。play right(oldIndex-1)；这个。autoplay()；}，render(){ let{ interval，autoPlay，activeIndex，defaultActiveIndex，direction，number，Boxstyle }=this . propsre turn div CLaSS name={ Boxstyle STYLe } OnClick={ this。left } left/SPan NAmE=' right COn ' OnClick={ this。right } right/SPan ul CLaSS name={ this。position()} { this。道具。children }/ul/div } })；导出默认伦博；index.js

导入" core-js/fn/object/assign "；从“反应”导入做出反应；从“反应世界”导入ReactDOM从""导入伦博.组件/伦博；ReactDOM.render(LunBo间隔={ 100 }数字={ 4 } Boxstyle=' content '间隔={ 4000 } li className=' boxStyleLi '！[](http://上传-图片。金苏。io/upload _ images/971705-6d 38 b 15221 a 904 c 9。jpg？imagemog 2/自动定向/剥离| imageView2/2/w/1240)/Li Li类名=' BoxStyleli '！[](http://上传-图片。金苏。io/upload _ images/971705-1ebf 3743 a7 d 163 c 7。jpg？imagemog 2/自动定向/剥离| imageView2/2/w/1240)/Li Li类名=' BoxStyleli '！[](http://上传-图片。金苏。io/upload _ images/971705-1158 b 127 a 710879 a . jpg？imagemog 2/自动定向/剥离| imageView2/2/w/1240)/Li Li类名=' BoxStyleli '！[](http://上传-图片。金苏。io/upload _ images/971705-2c8d 6 d5d 8 d3b 59 BC。jpg？imagemogr 2/自动定向/剥离| imageView2/2/w/1240)/Li/伦博，文档。getelementbyid(' app ')；App.css。内容{宽度： 400像素高度： 400像素；border: 3px实心鞍形棕色；相对位置：飞越：隐藏；}.内容ul {显示：块；宽度： 2500像素；高度： 100%;float:left绝对位置：z-index : 0；-WebKit-transit :所有0.5s-moz-transit :所有0.5s-ms-transit :所有0.5s-o-transit :所有0.5stransition:全部0.5s}。boxStyleLi { display:内联块；宽度： 400像素；高度： 400像素；向左浮动：}.盒子样式李img {宽度： 100%；高度： 100%;}.spanStyle { width: 500px高度： 400像素；border: 3px固体# 598b3a背景# 7177eb相对位置：}.一个位置{左侧： 0；}.两个位置{左侧：-400 px；}.位置{左侧：-800像素；}.四个位置{左侧：-1200 px；}.leftIcon { width: 50px高度： 50px背景技术# cd4d5c绝对位置：左： 0；top: 350px文本对齐：中心；线高： 50pxz指数： 999；}.右侧{宽度： 50像素高度： 50px背景# f6403d绝对位置：left: 350pxtop: 350px文本对齐：中心；线高： 50pxz指数： 999；}总结

通过反应这一门框架的学习，你可以从它独特的新特性中发掘一种新的思维模式。以上就是这篇文章的全部内容，希望对大家的学习或者工作能带来一定的帮助，如果有疑问可以留言交流。