lovecoding
/
web0715


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- jsx 语法浏览器不识别 jsx => js 浏览器可识别的语言 -->
    <script src="./babel.min.js"></script>
    <!-- react的核心库 -->
    <script src="./react.development.js"></script>
    <!-- 解析react中的dom库 -->
    <script src="./react-dom.development.js"></script>
</head>
<body>
    <div id="root">
    </div>
    <script type="text/babel">
        let root = ReactDOM.createRoot(document.getElementById("root"));
        function App() {
            return <Count num={5} />
        }
        class Count extends React.Component {
            constructor() {
                super();
                this.state = {
                    count:0
                }
            }
            addCount() {
                // this.setState({
                //     count: this.state.count + 1
                // })
                this.setState((prevState,props) => {
                    return {
                        count: prevState.count + props.num
                    }
                })
            }
            render() {
                const {count} = this.state;
                return (
                    <div>
                        <h1>数量:{count}</h1>   
                        <button onClick={this.addCount.bind(this)}>+</button>
                        <br/> 
                        <button>-</button>
                    </div>
                )
            }
        }
        root.render(<App/>)        
    </script>
</body>
</html>