<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件的状态机制</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<style type="text/css">
#example{
padding: 50px;
background: #fff;
}
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var LightningCounter = React.createClass({
getInitialState:function () {
return {
strikes:0
}
},
timerTricker:function () {
this.setState({
strikes:this.state.strikes +100
})
},
componentDidMount:function () {
setInterval(this.timerTricker,1000)
},
render:function () {
var coutnerStyle={
color:"#66ffff",
fontSize:50
}
var count = this.state.strikes.toLocaleString()
return(
<h1 style={coutnerStyle}>{count}</h1>
)
}
})
var LightningCounterDisplay = React.createClass({
render:function () {
var commonStyle = {
margin:0,
padding:0
}
var textStyle = {
emphasis:{
fontSize:38,
...commonStyle //引入公用样式
},
smallEmpasis:{
...commonStyle
},
small:{
fontSize:17,
opacity:0.5,
...commonStyle
}
}
var divStyle = {
width:250,
textAlign:"center",
backgroundColor:"black",
padding:40,
fontFamily:"sans-serif",
borderRadius:10,
color:"#999"
}
return(
<div style={divStyle}>
<LightningCounter/>
<h2 style={textStyle.smallEmpasis}>雷霆打击</h2>
<h2 style={textStyle.emphasis}>我们的地球</h2>
<p style={textStyle.small}>我们的地球</p>
</div>
)
}
})
ReactDOM.render(
<div>
<LightningCounterDisplay />
</div>,
document.querySelector("#example"));
</script>
</body>
</html>
