Accueil Explorer Aide
Connexion
lovecoding
/
W250913
8
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

react

zheng il y a 21 heures
Parent
5cf972dca4
commit
71e6fef17d
3 fichiers modifiés avec 78 ajouts et 3 suppressions
Vue unifiée Afficher les stats Diff
  1. 18 3
      21.react/初阶/7.函数组件.html
  2. 4 0
      21.react/初阶/8.类组件.html
  3. 56 0
      21.react/初阶/9.props.html

+ 18 - 3
21.react/初阶/7.函数组件.html
Voir le fichier 

@@ -18,11 +18,25 @@
 
          * 1.首字母大写 大驼峰命名法
 
          * 1.首字母大写 大驼峰命名法
 
          * 2.函数必须返回jsx
 
          * 2.函数必须返回jsx
 
          * 3.jsx必须有一个根节点 React.Fragment
 
          * 3.jsx必须有一个根节点 React.Fragment
 
+         * 不支持this
 
+         * 单向数据流：只能从父组件传给子组件
 
+         * props
 
         */
 
         */
 
+        // function LinkStyle() {
 
+        //     return (
 
+        //         <div>
 
+        //             <link rel="stylesheet" href="./css/a.css" precedence="high" />
 
+        //             <link rel="stylesheet" href="./css/b.css" precedence="low" />
 
+
 
+        //         </div>
 
+        //     )
 
+        // }
 
+
 
         function Good() {
 
         function Good() {
 
+            console.log(this, 'this')
 
             return (
 
             return (
 
                 <div>
 
                 <div>
 
-                    <h1>好好学习</h1>
 
+                    <h1 className='end'>好好学习</h1>
 
                 </div>
 
                 </div>
 
             )
 
             )
 
         }
 
         }
 
@@ -38,13 +52,14 @@
 
                 <h2>大家好</h2>
 
                 <h2>大家好</h2>
 
                 <h2>大家好</h2>
 
                 <h2>大家好</h2>
 
                 <h2>大家好</h2>
 
                 <h2>大家好</h2>
 
+
 
+                <Good />
 
+                <Welcome />
 
             </>
 
             </>
 
         }
 
         }
 
         const element = (
 
         const element = (
 
             <>
 
             <>
 
                 <News />
 
                 <News />
 
-                <Good />
 
-                <Welcome />
 
             </>
 
             </>
 
         )
 
         )
 
         const container = document.getElementById("root");
 
         const container = document.getElementById("root");

+ 4 - 0
21.react/初阶/8.类组件.html
Voir le fichier 

@@ -13,8 +13,12 @@
 
 <body>
 
 <body>
 
     <div id="root"></div>
 
     <div id="root"></div>
 
     <script type="text/babel">
 
     <script type="text/babel">
 
+        /**
 
+         * 支持this
 
+        */
 
         class Good extends React.Component {
 
         class Good extends React.Component {
 
             render() {
 
             render() {
 
+                console.log(this, 'this')
 
                 return <h1>哈哈</h1>
 
                 return <h1>哈哈</h1>
 
             }
 
             }
 
         }
 
         }

+ 56 - 0
21.react/初阶/9.props.html
Voir le fichier 

@@ -0,0 +1,56 @@
 
+<!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">
 
+        /*
 
+         * 单向数据流：只能从父组件传给子组件
 
+         * props 只读 不可修改
 
+         * 没有this 没有生命周期
 
+         * */
 
+        function Parent() {
 
+            return (
 
+                <div>
 
+                    <h1>你好</h1>
 
+                    <hr />
 
+                    <hr />
 
+                    <Child name='图图' age={3} header={<h2>我是子元素的头部</h2>} />
 
+                </div>
 
+            )
 
+        }
 
+        // function Child({ name, age, header }) {
 
+        //     return (
 
+        //         <div>
 
+        //             {header}
 
+        //             <p>我叫{name},今年{age}岁</p>
 
+        //         </div>
 
+        //     )
 
+        // }
 
+        function Child(props) {
 
+            // props.age +
 
+            console.log(props, '111')
 
+            return (
 
+                <div>
 
+                    {props.header}
 
+                    <p>我叫{props.name},今年{props.age}岁</p>
 
+                </div>
 
+            )
 
+        }
 
+        const element = <Parent />
 
+        const container = document.getElementById("root");
 
+        const root = ReactDOM.createRoot(container)
 
+        root.render(element);
 
+    </script>
 
+</body>
 
+
 
+</html>