lovecoding
/
web0715


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
							<!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"));
        /**
         * ref绑定：
         * 1.在定义部分 声明 ref名字  来自于React.createRef()里
         * 2.在元素部分 需要 使用 ref={xxx}
         * 3.输出： {current:绑定ref的元素}
        */
       const countRef = React.createRef();
       const inpRef = React.createRef();

        function App() {
            function getMain() {
                console.log(inpRef,"点击了 获取内容",countRef)
            }
            return (
                <div>
                    <p onClick={getMain}>我是函数组件</p>
                    <Count ref={countRef} />  
                    <input type="text" ref={inpRef} />  
                </div>
            )
        }

       class Count extends React.Component {
        constructor() {
            super();
            this.state = {
                num:20
            }
        }
        render(){
            return (
                <h1>显示数值:{this.state.num}</h1>
            )
        }
        }
        root.render(<App/>)        
    </script>
</body>
</html>