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>
原文地址:https://www.cnblogs.com/funkboy/p/12666467.html