| 12345678910111213141516171819202122232425262728293031323334353637383940414243 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <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">
- let root = ReactDOM.createRoot(document.getElementById("root"));
- class Count extends React.Component {
- // 给类组件添加状态 构造器函数 用于初始化实例的
- constructor(props) {
- // 通过this访问当前创建的实例 但是 一定要 在调用super函数后才可以使用this
- super(props);
- // 组件自身的状态
- this.state = {
- a: 'hi'
- }
- }
- render() {
- console.log(this)
- // 获取 状态 this组件实例的state属性
- let {a} = this.state;
- return (
- <div>
- <p>展示:{a}</p>
- {/**<p>展示:{this.state.a}</p>*/}
- </div>
- )
- }
- }
- root.render(<Count/>);
- </script>
- </body>
- </html>
|
