web子库代码逻辑结构的理解

2016-12-20  本文已影响52人  吧啦啦小汤圆

今天要在web子库里面写学生界面相关内容,由于我是刚被切换到这个项目上不久,所以对这个子库不是很了解,但是我发现web子库里面是写一期项目的学生写的代码,结构根本不清楚,然后今天和同学用了一下午时间把结构弄清楚,那么我做了一个梳理和总结,记录下来

mmexport1482242728561.jpg

哇,好乱啊

再解说一下:

1.添加页签

在如下文件中添加页签


每一个页签是一个
<a onClick={this.handleClick.bind(null, item.mark, this.state.currentState)}> 页签 </a>


里面还要写上
2.添加自己的组件
3 . 通过className 来控制每个页签所对应的页面的隐藏和显示:

如果当前页面是页签A所对应的页面,那么当我点击下页签A的时候,点击事件里面就会执行一个方法
UserCenterActions.changeState(mark,currentState);来改变getInitialState函数里面的curentState的值为当前页签所对应的mark属性值; 那么在该页面所在组件里面做className判断的时候
var classString = (this.state.currentState === 'mentorManagement' ? '' : ' hide');(注意: 这里的字符串’mentorManagement‘,就是当前页面所对应的页签的mark),如下:

this.state.currentState它就是等于mark属性值的,那么上上 个 图中的classString的值就等于``, 所以当前页签所对应的页面所在的组件是显示的!

那么对于其他的页签,如页签B,也要做同样判断,在页签B所对应的页面所在组件中,是通过currentState来获取className的值就是’hide‘,因为当前currentState的值肯定是不等于该页签B所对应的mark属性值啊,所以该组件的classNamehide ,那么该组件就隐藏啊!

上一篇 下一篇

猜你喜欢

热点阅读