标签:locale ring oca end dom oct react 时间 class
写一个显示时间日期的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
let element;
function clock() {
element = (
<div>
<h1>Hello, World</h1>
<h2>现在是{new Date().toLocaleTimeString()}</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById(‘example‘)
);
}
clock();
setInterval(clock,1000);
//console.log(element);
</script>
</body>
</html>
注意如果要动态的显示时间的话reactDom要放在函数里面,因为这样才会多次调用函数。
let element; function clock() { element = ( <div> <h1>Hello, World</h1> <h2>现在是{new Date().toLocaleTimeString()}</h2> </div> ); } clock(); ReactDOM.render( element, document.getElementById(‘example‘) ); setInterval(clock,1000);
注意不能写成这样,这样子的话不会动态的显示时间,虽然element会动态的改变,但是的话,render还是只会执行一次
标签:locale ring oca end dom oct react 时间 class
原文地址:https://www.cnblogs.com/WildSky/p/11229674.html