一个demo两张图带你走进React的世界(二)
3.2.3、TableHead组件
该组件的设计和RowNode
组件类似,唯一不同的就是一个全选的复选框。为什么说不同呢?细心的童鞋肯定发现了关于这个复选框使用的是state
,而RowNode
使用的却是props
。
原因是因为我们表的每一行的选中状态是记录在了MainWrapper
组件中,所以传下来便是props
,而全选的状态是不需要再顶层组件中的,所以这个时候就需要我们得TableHead
组件来维护一个属于自己的状态。
因此代码设计便和RowNode
的稍微些许不一样。
3.2.4、TableBox组件
此组件是用来囊括TableHead 和TableContent 组件的,并且传递回调和数据,没有别的操作在此组件上。
这个组件多了一个propTypes
的参数,是用来告知顶层组件传递props的时候的某些数据的格式,如果不符合将会报错。具体参考:React中文文档--可复用组件
3.2.5、TableAction组件
包含了CRUD四个按钮组件,但是在每个组件中没有别的多余操作,而是将涉及到表项的操作回调到了顶层组件MainWrapper
中来,所以四个小组件的代码几乎一样,除了Add的操作,Add组件是为了能够显示出弹出框,所以当点击Add按钮的时候,使用下面代码来显示PopUpBox组件:
var popUpBox = document.querySelector('.popUp');
popUpBox.classList.add('open');
3.2.6、PopUpBox组件
这个组件的复杂度是仅次于MainWrapper
组件,为什么这么说?因为'PopUpBox’的数据是依据你的操作是Add还是Edit决定的,而如果是Edit,那么数据又是取决于你勾选的是哪一行来决定的,所以便有了如下这张图示:
这个组件设计的难点是如何当顶层组件MainWrapper
的editData
发生改变的时候,组件内部的两个input输入框的数据也跟着发生变化?因此
- 我们在点击Edit按钮的时候采取触发
MainWrapper
组件中editData
的状态变化; - 我们使用组件的生命周期中的
componentWillReceiveProps
来决定是否状态发生改变,所以当顶层组件的editData
发生改变的时候,将会通过这个生命周期状态来获取新的props,并更新掉PopUpBox
自己维护的一个name
和color
的状态,从而让两个输入框显示的结果保证正确。
之后按照input的标准组件写法来:
...
handleNameChange: function(e){
this.setState({name: e.target.value});
},
...
<input type='text' ref='name' name='name' value={this.state.name} onChange={this.handleNameChange}/>
3.2.7、MainWrapper组件
当下面的所有组件都设计好的时候,MainWrapper组件便不再那么难写了,直接看code还是更省事。
4、总结
此篇文章的目的不是普及概念,而是从设计的角度来说明React。有了React,但凡是设计一个大组件,我们都应该在设计之初细分成小组件,并将所有组件需要的数据以及回调都一并整理清楚,相信经历多了总能出点经验的,既然有了这种解决方案,不以系统全局来设计,那真的是浪费了React的精髓了。
5、参考
公众号关注一波~
![微信公众号](https://blogimage.5udou.cn/homePage/%E5%85%AC%E4%BC%97%E5%8F%B7-%E7%99%BD%E8%89%B2%E7%89%88.png?x-oss-process=style/addWaterMarkBottom)
网站源码:linxiaowu66 · 豆米的博客
Follow:linxiaowu66 · Github
关于评论和留言
如果对本文 一个demo两张图带你走进React的世界(二) 的内容有疑问,请在下面的评论系统中留言,谢谢。