master

分支 (1)

管理

管理

master

1711AReact
/
demo9.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入的时候要注意引入顺序，讲按下面的顺序引入 -->
    <script src="lib/react.js"></script>
    <script src="lib/react-dom.js"></script>
    <script src="lib/browser.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
    class Clock extends React.Component{
      constructor(props){
             super(props)
             this.state={
                 number:0
             }
             //不能直接修改state里面的值

       }
       componentDidMount(){
           this.setState({
               number:Number(this.props.sun)
           })
        setInterval(()=>{
       this.setState({
        number:this.state.number+1
       })
    },1000)
       }
      render(){
          return(
              <div>
                 <h1>
                        {this.state.number}
                    </h1>
                </div>
          )
      }
    }
    ReactDOM.render(
        <Clock sun={"0"}/>,document.getElementById("root")
    )

    </script>

</body>

</html>