zoukankan      html  css  js  c++  java
  • react + antd html网页配置非框架

    只支持antd 3.x 用最新的4.x会报错

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title></title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link href="css/style.css" rel="stylesheet">
            <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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.0.2/antd.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.0.2/antd.js"></script>
        </head>
        <body>
        <h1>hallo</h1>
        <button onclick="tink();return false" >this</button>
        <button onclick="jt();return false" >箭头</button>
        </p>
        <input name="thein" />
        <button onclick="simple();return false" >that git</button>
        <div id="example"></div>
        </body>
        <script>
        function tink(){
            alert(0.1 + 0.2 ==0.3);
        }
        
        var simple = a => a > 15 ? 15 : a;
        var jt=()=>{alert ((() => 'foobar')()) }
        
        </script>
      
    <script type="text/babel">
    function tick() {
      
      ReactDOM.render(
       <div>
        <antd.Row>

          <antd.Col span={8}>  <antd.Button type="primary">Primary</antd.Button>
      
      <Clock date={new Date()} /></antd.Col>
          <antd.Col span={8}><Head/> <Body/></antd.Col>
          <antd.Col span={8}> </antd.Col>
        </antd.Row>
        </div>,
        document.getElementById('example')
      );
    }
    function Clock(props){
     return(
         <div>
         <h1> hello boy</h1>
      

         <h2> 现在是 {props.date.toLocaleTimeString()} </h2>
         </div>
     );
    }
    class Head extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          history: [{
            squares: Array(3).fill(null),
          }],
        };
      }
      render(){
      return(
        <antd.Card><antd.Input   placeholder="添加ToDo"  style={{'width':'400px','marginRight':'10px'}}/> <antd.Button  type="primary" ghost >添加</antd.Button></antd.Card>
      );
    }
    }
    function Body(){
      return(
        <antd.Card>
          <antd.Card>
        todo
      </antd.Card>
      <antd.Card>
        done
      </antd.Card>
        </antd.Card>
      );
    }
     
    setInterval(tick, 1000);
    </script>
    </html>
  • 相关阅读:
    简述-计算机语言的前世今生
    记一次由于引用第三方服务导致的GC overhead limit exceeded异常
    JAVA初始化及类的加载
    springboot容器启动顺序之@Configuration ContextRefreshedEvent事件初始化 ApplicationRunner
    高并发编程之发布与溢出
    编写高质量JAVA代码之让接口的职责保持单一
    Spring Boot中初始化资源的几种方式
    Thread.yeild方法详解
    JAVA基础之this关键之理解
    Django 1.10 中文文档------3.3.8 会话sessions
  • 原文地址:https://www.cnblogs.com/funkboy/p/12666467.html
Copyright © 2011-2022 走看看