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>
    
  • 相关阅读:
    几个常见移动平台浏览器的User-Agent
    正则表达式那些事儿(三)
    正则表达式那些事儿(二)
    正则表达式那些事儿(一)
    jQuery官网plugins栏目下那些不错的插件
    UVA 11729 Commando War 突击战 【贪心】
    HDOJ 2084 数塔 【dp】
    HDOJ 1465 不容易系列之一 【错排公式 递推】
    HDOJ 2046 骨牌铺方格 【递推】
    HDOJ 2044 一只小蜜蜂... 【递推】
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/12829944.html
Copyright © 2011-2022 走看看