- React.js 16从入门到实战
- 王金柱
- 199字
- 2021-03-24 11:10:37
4.3 开始封装时钟UI
首先,我们就从封装React State时钟的UI开始,当然目前仅仅就是一个静态的时钟UI,具体代码如下:
【代码4-6】(详见源代码目录ch04-react-state-clock-ui.html文件)
![](https://epubservercos.yuewen.com/27D3F5/16499866705998906/epubprivate/OEBPS/Images/Figure-P78_11502.jpg?sign=1739005638-iMrRdVoIybTVfHBXtlkYE2Iy4UmQpfBO-0-e43f64f112af6430758eb2d173d8e471)
关于【代码4-6】的说明:
●核心代码是第18~20行代码定义的函数组件(ClockReactComp()),实现了一个可封装的时钟UI。目前,这个时钟UI是个静态组件,是无法自动更新的。
测试网页的效果如图4.1所示。如图中的箭头所示,页面中显示出了React时钟UI的样式,当然目前这个时钟是静态无法自动更新的。
![](https://epubservercos.yuewen.com/27D3F5/16499866705998906/epubprivate/OEBPS/Images/Figure-P79_11720.jpg?sign=1739005638-ia3pMv35DYvJM9HvrNpoL9PCfqnaegQz-0-5dd72590d54d3921b57291bd3413ae4a)
图4.1 React时钟UI