react初学
Posted wildsky
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react初学相关的知识,希望对你有一定的参考价值。
写一个显示时间日期的
<!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还是只会执行一次
以上是关于react初学的主要内容,如果未能解决你的问题,请参考以下文章