码迷,mamicode.com
首页 > 其他好文 > 详细

react初学

时间:2019-07-23 09:25:20      阅读:94      评论:0      收藏:0      [点我收藏+]

标签: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还是只会执行一次

react初学

标签:locale   ring   oca   end   dom   oct   react   时间   class   

原文地址:https://www.cnblogs.com/WildSky/p/11229674.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!