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>
