今天要在web子库里面写学生界面相关内容，由于我是刚被切换到这个项目上不久，所以对这个子库不是很了解，但是我发现web子库里面是写一期项目的学生写的代码，结构根本不清楚，然后今天和同学用了一下午时间把结构弄清楚，那么我做了一个梳理和总结，记录下来
mmexport1482242728561.jpg
哇，好乱啊
再解说一下：
1.添加页签
在如下文件中添加页签
每一个页签是一个
<a onClick={this.handleClick.bind(null, item.mark, this.state.currentState)}> 页签 </a>
里面还要写上
-
Reflux 将reflux的
UserCenterStore绑定进来
mixins: [Reflux.connect(UserCenterStore)], -
写上
getInitialState方法，初始化 默认的currentState的值是‘userDetail’，表示每次进入学生界面都会默认显示第一个页签对应的页面。 -
在页签的点击事件
handleClick里面调用了Reflux的actions 为‘changeState’的方法，如下：
UserCenterActions.changeState(mark,currentState)方法，它会触发UserCenterStore里面的onChangeState方法，来改变getInitialState函数里的currentState的值
（改变currentState的只的原理是：当点击某一个页签的时候，会将该页签所对应的mark属性赋值给currentState）
真相如下：
注意：页签的点击事件中调用的方法：
UserCenterActions.changeState(mark,currentState)，对应的是Reflux的action为‘changeState’，那么‘changeState’所触发的事件是UserCenterStore中的onChangeState方法
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属性值啊，所以该组件的className为hide ，那么该组件就隐藏啊！
网友评论