[React-章节7 实践篇] 做一个留言板项目 之 留言详情页

本篇接《[React-章节6 实践篇] 做一个留言板项目 之 规划》

我从最简单的留言详情页开始编写,页面包含一个工具栏,一个标题,一个正文。

其中工具栏作为一个子组件实现,它包含了回退按钮,此前已经实践过。正文希望可以内容垂直居中并且可以填充满屏幕。

整个MsgDetailPage组件实现如下:

在DidMount时候,DOM已经生成,此时可以发起ajax获取数据,最终填充到state中触发Update渲染。

DidUpdate的时候,数据被填充,触发页面重新渲染。为了让正文部分填充满屏幕,我需要获取渲染后的页面真实样式,包括工具栏和标题栏的真实高度,从而动态计算正文部分的最小高度,修改其css。

这里render方法里用到了ref属性(点我学习),它用于方便的获取对应的原生DOM节点,用于一些个性化操作。首先在对应的html标签或者子组件标签内定义ref=”自定义名称”,之后在虚拟DOM真实渲染完成后(例如在DidUpdate,DidMount内)通过this.refs.xxxx取出DOM节点。这里,我为了操作方便将原生DOM转成了jquery的节点。

另外对于ToolBar来说,它是一个react组件,通过this.refs获取到就是对应的ToolBar类对象。我可以继续访问ToolBar的refs去获取其内部的DOM节点,也就是this.refs.ToolBar.refs.ToolBarContainer。

在DidUpdate内,我最后if判断了高度是否发生新的变化,如果没有变化则不进行setState。这是因为每次setState都会触发DidUpdate函数,而我们的DidUpdate又会调用setState,如果没有终止条件则会无限递归。

这里再看一下ToolBar的定义即可:

并没有太过于复杂的东西,onClick直接通过router的goBack实现浏览器回退。

这是页面的模样:

qq20160922-02x

在本篇中,通过js动态调整正文部分的高度并不是很优雅,据说有flex这个类似于bootstrap的库可以用来轻松实现布局,有兴趣后面可以学习一下。

下一篇中,我将编写最复杂的MsgListPage,将会使用react iscroll插件实现滚动,并基于它的事件回调,自己实现下拉刷新,上拉加载能力。

如果文章帮助您解决了工作难题,您可以帮我点击屏幕上的任意广告,或者赞助少量费用来支持我的持续创作,谢谢~