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

今天要在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属性值啊,所以该组件的classNamehide ,那么该组件就隐藏啊!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,686评论 25 708
  • 第9辑 我的愿望我的梦 黄石市龚家巷小学小风筝班 2017-6 卷首语 以梦为马 随处...
    木铧犁阅读 1,343评论 0 3
  • 人生匆匆,当我们身处大学时,常常觉得时间漫长,当我们挥手告别,当下并无感觉,却总是时间愈久,就如好酒,愈闻出它的香...
    f6a3d3dce0ee阅读 584评论 0 0
  • 随着二胎政策的逐渐开放,生活水平不断提高,政策和经济条件已不再成为生二胎的障碍。但因为父母准备生二胎,孩子做出各种...
    辅仁淑凡官方微博阅读 461评论 0 1
  • 写在前面 我所理解的继承,就像字面上的那样的意思的继承,儿子继承父亲的东西,比如,票子、车子、房子,在编程中的继承...
    卢子野阅读 247评论 0 0