lovecoding
/
VIP32


			
				
					
						
						
							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>
    <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.getElementById("root"));
      let a = "天天";
      // 父组件中调用子组件 让子组件显示父组件传过去的值
      function App() {
        let user = "图图";
        return (
          <div>
            {/*在使用组件的位置 传参*/}
            <Good names={user} age={3}></Good>
            {/*组件复用*/}
            {/*<Good names={"孙悟空"} age={500}></Good>*/}
          </div>
        );
      }
      // 函数:props需要接收 才可以进行操作
      // 复用组件
      //   function Good(props) {
      //     // props 是单向数据流 只读的 不可修改
      //     console.log(props.names,'打印的')
      //     // props.names = '张小丽'
      //     return (
      //         <div>
      //             <h1>Hello,{props.names}</h1>
      //             <h2>今年{props.age}岁</h2>
      //         </div>
      //     )
      //   }

        // 类：props全局获取 就可以进行操作
        class Good extends React.Component {
            render() {
                console.log(this.props,'哈哈哈哈')
                return (
                <div>
                    <h1>Hello,{this.props.names}</h1>
                    <h2>今年{this.props.age}岁</h2>
                </div>
            )
            }
        }
      root.render(<App />);
    </script>
  </body>
</html>