react.js 时钟组件

Posted yscode

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react.js 时钟组件相关的知识,希望对你有一定的参考价值。

React是用于构建用户界面的 javascript 库,React 组件使用一个名为 render() 的方法, 接收数据作为输入,输出页面中对应展示的内容。
React除了可以使用外部传入的数据以外 (通过 this.props 访问传入数据), 组件还可以拥有其内部的状态数据 (通过 this.state 访问状态数据)。 当组件的状态数据改变时, 
组件会调用 render() 方法重新渲染。
效果图没用样式写一下,凑合着看吧!
技术分享图片
实例模拟:
<style>
	.list{
		list-style:none;
	}
	#app{
		width:80%;
		margin:0 auto;
		text-align:center;
		font-size:50px;
		font-weight:bold;
		color:black;
	}
</style>
<script type="text/babel">
		class Comp extends React.Component{
			//构造函数 构造函数是在整个类中未初始化中执行的
			constructor(...args){  //构造函数名
			super(...args);//超类。
			this.state={h:‘0‘,m:‘0‘,s:‘0‘};
			var that=this;
			 setInterval(function(){
				that.fn()
			},1000)
		}
		componentDidMount(){
		  this.fn();
		}
		componentWillUpdate(){
		  console.log("更新之前");
		}
		componentDidUpdate(){
		  console.log("更新之后");
		}
		fn(){
		//传json
			var D=new Date();
			this.setState({
			  h:D.getHours(),
			  m:D.getMinutes(),
			  s:D.getSeconds()
			})
		}
		render(){
		  return <div>
			<span>{this.state.h}:</span>
			<span>{this.state.m}:</span>
			<span>{this.state.s}</span>
		    </div>;
		}
	}
      window.onload=function(){
          var time=document.getElementById(‘app‘);
	      ReactDOM.render(<Comp/>,time);
      }	    
</script>  
<div id="app"></div>



以上是关于react.js 时钟组件的主要内容,如果未能解决你的问题,请参考以下文章

React Js之组件

从 React.js 中的另一个类组件调用函数

如何在 React js 中渲染功能组件之前获取数据

无法在类组件 React.js 中使用 useState

为啥 React.js 不在新窗口中单独显示我的组件?

React.js:将道具从函数传递到组件