lovecoding
/
VIP20


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
							<!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'));

      function App() {
        var username = '郭郭';
        return (
          <div>
            <Greeting name={username} age={18} />
            {/* 组件复用 */}
            <Greeting name={'容嬷嬷'} age={19} />
          </div>
        );
      }
      // 就是组件在渲染时绑定的所有属性 类型=> object{name: '大侠', age: 18}
      // function Greeting(props) {
      //   return <h3>你好，{props.name}</h3>;
      // }

      // function Greeting(props) {
      //   //
      //   // props.name = '大侠'; // 从js角度看 修改props操作是可以的。
      //   // 但是 在 React组件中 是不可以 修改props的。即 props是只读的
      //   return <h3>你好，{props.name}</h3>;
      // }
      // ==== 类组件中 使用props ====
      class Greeting extends React.Component {
        render() {
          return (
            <div>
              <h3>你好，{this.props.name}</h3>
              <p>今年我已经 {this.props.age} 岁。</p>
            </div>
          );
        }
      }

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