react组件---数字时钟

<!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>

阅读更多 登录后自动展开
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页