zoukankan      html  css  js  c++  java
  • 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">
    const element =<h1>Hello, React!</h1>;
    ReactDOM.render(
        element,
        document.getElementById('example')
    );
    </script>
    
    </body>
    </html>
    

    更新时间!

    <!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">
    function tick() {
      const element = (
        <div>
          <h1>Hello, world!</h1>
          <h2>现在是 {new Date().toLocaleTimeString()}</h2>
        </div>
      );
      ReactDOM.render(
        element,
        document.getElementById('example')
      );
    }
     
    setInterval(tick, 1000);
    </script>
    
    </body>
    </html>
    

    使用组件

    <!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">
    class Clock extends React.Component {
      render() {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>现在是 {this.props.date.toLocaleTimeString()}</h2>
          </div>
        );
      }
    }
    
    function tick() {
      ReactDOM.render(
        <Clock date={new Date()} />,
        document.getElementById('example')
      );
    }
    
    setInterval(tick, 1000);
    </script>
    
    </body>
    </html>
    
  • 相关阅读:
    Python中循环引用(import)失败的解决方法
    junit中线程需要注意的问题
    python动态绑定属性和方法
    python输出缓冲区的问题
    使用RateLimiter完成简单的大流量限流,抢购秒杀限流
    guava的限流工具RateLimiter使用
    高性能分布式锁-redisson的使用
    正则表达式
    input 标签鼠标放入输入框补全提示
    Google guava工具类的介绍和使用
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/12829944.html
Copyright © 2011-2022 走看看