前言
我發現React和AngularJS思想完全不同，AngularJS是基於雙向綁定，在Modal層中定制數據，然後雙向改變。但是React是通過prop和state來改變view層的狀態。下面是我寫的一個輪播圖組件，可以直接看一下。代碼很簡單。原理就是通過React在componentDidMount後改變setState ，來動態改變css樣式。
說明以下：看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"></li> <li className="boxStyleLi"></li> <li className="boxStyleLi"></li> <li className="boxStyleLi"></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;}總結
通過React這一門框架的學習，你可以從它獨特的新特性中發掘一種新的思維模式。以上就是這篇文章的全部內容，希望對大家的學習或者工作能帶來一定的幫助，如果有疑問可以留言交流。