|
|
@@ -0,0 +1,53 @@
|
|
|
+<!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>
|
大侠