ReactJS使用心得之轮播图

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_27099139/article/details/75081748

今天帮人用React写了一个轮播图功能,之前只是听过,没有用过React,刚好了解下;大致上是知道怎么用了,这东西给我的感觉书写方式上倒是跟mobile有点类似,中途肯定有坑,但是自己的想法貌似都还正确,api上没有的方式只能自己尝试了,记录下问题防止再忘了

1.render方法下的,最外层的只能有一个元素包裹着,例如下面的render方法,return的地方最外层只有一个div,不能再有同级,不然会报错
render: function() {
			return (
			  <div className="slider-box" onMouseEnter={this.silderBoxEnter} onMouseLeave={this.silderBoxLeave}>
				<SliderList data={this.state.data} nowZ={this.state.nowZ} nowIndex={this.state.nowIndex}/>
				<div className="left" onClick={this.leftClick} style={{zIndex:this.state.nowZ+10}}></div>
			  	<div className="right" onClick={this.rightClick} style={{zIndex:this.state.nowZ+10}}></div>
				<SliderMenu dataLength={this.state.dataLength} nowZ={this.state.nowZ} nowIndex={this.state.nowIndex} navsOver={this.navsOver}/>
			  </div>
			);
		  }
2.像上面代码中,事件绑定都是首字母大写,这点我倒是挺意外,和html里不一样,不过更意外的是,我写错事件名字,控制台会给提示,告诉我,我可能要用的是哪个事件,在元素上添加样式的时候要用{{zIndex:1}}这样的方式,样式属性名称应该是和js都一样的,一个轮播图,我拆成了三个部件,一个主体,用来初始化数据和事件控制,一个轮播内容,一个轮播导航和左右的箭头;上班那部分代码中的navsOver我传过去的是个事件,api里并没有这种写法,但是我试了下可以,这样一来,我控制state更加方便;


//创建轮播内容
		var SliderList = React.createClass({
		  render: function() {
			var sliderNodes=[];
			var nowIndex=this.props.nowIndex;
			var nowZ=this.props.nowZ;
			$.each(this.props.data,function(i,e){
				sliderNodes.push(<li className={i==nowIndex?'select slider-'+i:'slider-'+i} style={{zIndex:i==nowIndex?nowZ:1}} key={i}><img src={e}/></li>);	
			});
			return (
			  <ul className="slider-list">
				{sliderNodes}
			  </ul>
			);
		  }
		});
3,上面部分代码,手动拼接需要数组添加,我刚开始用+=的方式并不行,需要注意的是,自己组合className的方式,包括取值,这里遍历拼接需要方式key这个属性,作用目前我还没去仔细了解,事件触发的时候貌似对象也可以拿到这个key,作用应该和微信小程序中的wx:key是一样的,是个标识;
4.props和state,props的属性都是通过元素上传过去的属性,像第一段代码dataLength那样;因为没有了解源码,传过去的state的值应该是没有创建新对象的,像数据双向绑定那样对值有监测;如果state进行改变,子部件里render中的元素貌似也会更新,但是我通过控制台没有看到dom重新加载,像上面那样className里做的判断会判断;
api上也说有个方法可以设置是否重新render更新;应该我是没用;个人觉得不太习惯这种写法,把dom都写在js里,跟最早只使用jquery手动拼接json一样,不过这点我觉得,如果用来做PC端网站,比knockout和angular,还有vue好,逻辑不用写在页面上,让别人仿站也有点难度
,不过这点。。。。对于稍微厉害点的人都不算什么啦

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页