react-组件状态机制（五）

<!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>
react-组件状态机制（五）

猜你喜欢
