lovecoding
/
VIP20


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../babel.min.js"></script>
    <script src="../../react.development.js"></script>
    <script src="../../react-dom.development.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const root = ReactDOM.createRoot(document.querySelector('#root'));

      class Counter extends React.Component {
        // 给类组件添加状态
        constructor(props) {
          // 通过this访问当前创建的实例，但是 一定要 在调用super函数后才可使用this
          super(props);
          this.state = {
            c: 0,
          }; // 组件的自身状态 （类比 Vue组件的data属性）
        } // 构造器函数 用于给实例初始化的

        render() {
          // 获取 状态 通过 this组件实例的state属性
          return (
            <div>
              <p>当前计数：{this.state.c}</p>
              <p>
                <button>-</button>
                <button>+</button>
              </p>
            </div>
          );
        }
      }

      root.render(<Counter />);
    </script>
  </body>
</html>