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

哇,好乱啊
再解说一下:
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 ,那么该组件就隐藏啊!