react组件---数字时钟
程序员文章站
2022-03-26 17:56:42
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react</title>
<script src='react.js'></script>
<script src='react-dom.js'></script>
<script src='babel.min.js'></script>
</head>
<body>
<div id='example'></div>
<!-- 注意此时script标签的类型 -->
<script type='text/babel'>
/*数字时钟组件*/
/*定义组件*/
class Clock extends React.Component{
constructor(){
super(); this.state = {
time:new Date()
}
/*更新时间*/
setInterval(function(){
this.setState({
time:new Date()
});
}.bind(this),1000);
}
/*渲染组件*/
render(){
return (
<h1>{this.state.time.toLocaleDateString()}
{this.state.time.toLocaleTimeString()}</h1>
);
}
}
ReactDOM.render(
/*组件渲染*/
<Clock />,
document.getElementById('example')
);
</script>
</body>
</html>上一篇： hutool中资源流相关操作
下一篇： 使用静态关键字实现单例模式