β

使用React编写简单的时钟组件

日志@十七蝉 101 阅读

使用 React 可以很容易的创建复用UI组件(Widget)。

比如这样:

这个示例很简单,使用了 React ,另外使用 momentjs 对日期时间做处理。

示例见 github

代码很简单,先用react创建一个类:

var ClockWidget = React.createClass({
render: function() {
var now=moment();
return React.DOM.p(null,now.format('H:mm:ss'));
}
});

主要是实现render方法。

然后,创建一个工厂类:

var AppFactory = React.createFactory(ClockWidget);

最后,在定时任务中(间隔50ms):

var start = new Date().getTime();
setInterval(function() {
React.render(
AppFactory(), //渲染对象
document.getElementById('container') //定位到dom元素
);
}, 50);

使用 React 可以很容易的创建复用UI组件(Widget)。

比如这样:

这个示例很简单,使用了 React ,另外使用 momentjs 对日期时间做处理。

作者:日志@十七蝉
借助文字,一个人可以向众人说话,死者可以向生者说话,生者可以向未生者说话。
原文地址:使用React编写简单的时钟组件, 感谢原作者分享。

发表评论