• 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>
  • 相关阅读:
    一个陌生女人的来信 Brief einer Unbekannten
    占星术的历史与流变
    占星术基础知识(星座及其标志)
    _________ 公告栏___________
    意识科学初步:David Chalmers的简单问题与困难问题
    意识科学初步:David Chalmers的简单问题与困难问题
    科研笔记(2019年01月29日01:17:57):Python写用于交付的工程项目的基本流程
    中国知网(cnki)上caj格式转pdf的方法
    灰色关联度分析(Grey Relation Analysis,GRA)原理详解
    货币金融学(米什金)笔记:金融体系、货币相关
  • 原文地址:https://www.cnblogs.com/funkboy/p/12666467.html
Copyright © 2020-2023  润新知