Etusivu Tutki Apua
Kirjaudu sisään
lovecoding
/
W250913
8
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Selaa lähdekoodia

react

zheng 18 tuntia sitten
vanhempi
71e6fef17d
commit
003fcc714e
4 muutettua tiedostoa jossa 117 lisäystä ja 8 poistoa
Yhdistetty näkymä Näytä diff tilastot
  1. 1 0
      21.react/初阶/1.html
  2. 44 0
      21.react/初阶/10.props.html
  3. 63 0
      21.react/初阶/11.事件.html
  4. 9 8
      21.react/初阶/7.函数组件.html

+ 1 - 0
21.react/初阶/1.html
Näytä tiedosto 

@@ -11,6 +11,7 @@
 
     <div>
 
     <div>
 
         <label for="aa">姓名</label>
 
         <label for="aa">姓名</label>
 
         <input type="text" id="aa">
 
         <input type="text" id="aa">
 
+        <!-- <button onclick="">按钮</button> -->
 
     </div>
 
     </div>
 
 </body>
 
 </body>

+ 44 - 0
21.react/初阶/10.props.html
Näytä tiedosto 

@@ -0,0 +1,44 @@
 
+<!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">
 
+        class Parent extends React.Component {
 
+            render() {
 
+                return (
 
+                    <div>
 
+                        <h1>父元素</h1>
 
+                        <Child name='图图' age={3} />
 
+                    </div>
 
+                )
 
+            }
 
+        }
 
+        class Child extends React.Component {
 
+            render() {
 
+                console.log(this.props, '111')
 
+                return (
 
+                    <div>
 
+                        <h1>子元素</h1>
 
+                        <p>{this.props.name}</p>
 
+                    </div>
 
+                )
 
+            }
 
+        }
 
+        const element = <Parent />
 
+        const container = document.getElementById("root");
 
+        const root = ReactDOM.createRoot(container)
 
+        root.render(element);
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 63 - 0
21.react/初阶/11.事件.html
Näytä tiedosto 

@@ -0,0 +1,63 @@
 
+<!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>
 
+    <style>
 
+        .box1 {
 
+            width: 400px;
 
+            height: 400px;
 
+            background: #f00;
 
+        }
 
+
 
+        .box2 {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #ff0;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="root"></div>
 
+    <script type="text/babel">
 
+        const handleClick = () => {
 
+            console.log("你好")
 
+        }
 
+        const handleBox1 = () => {
 
+            console.log("1111")
 
+        }
 
+        const handleBox2 = (event) => {
 
+            console.log("222")
 
+            // event.stopPropagation();
 
+        }
 
+        const handleJump = (event) => {
 
+            console.log("da'yin")
 
+            event.preventDefault();
 
+        }
 
+        function WelCome() {
 
+            return (
 
+                <div>
 
+                    <h1 onClick={handleClick}>欢迎光临</h1>
 
+                    <h1 onClick={() => console.log('哈哈')}>欢迎光临2</h1>
 
+                    <div className='box1' onClick={handleBox1}>
 
+                        <div className='box2' onClick={handleBox2}>
 
+                        </div>
 
+                    </div>
 
+                    <a href="http://www.baidu.com" onClick={handleJump}>跳转</a>
 
+                </div>
 
+            )
 
+        }
 
+        const element = <WelCome />
 
+        const container = document.getElementById("root");
 
+        const root = ReactDOM.createRoot(container)
 
+        root.render(element);
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 9 - 8
21.react/初阶/7.函数组件.html
Näytä tiedosto 

@@ -22,15 +22,15 @@
 
          * 单向数据流：只能从父组件传给子组件
 
          * 单向数据流：只能从父组件传给子组件
 
          * props
 
          * props
 
         */
 
         */
 
-        // function LinkStyle() {
 
-        //     return (
 
-        //         <div>
 
-        //             <link rel="stylesheet" href="./css/a.css" precedence="high" />
 
-        //             <link rel="stylesheet" href="./css/b.css" precedence="low" />
 
+        function LinkStyle() {
 
+            return (
 
+                <>
 
+                    <link rel="stylesheet" href="./css/a.css" precedence="low" />
 
+                    <link rel="stylesheet" href="./css/b.css" precedence="high" />
 
 
 
-        //         </div>
 
-        //     )
 
-        // }
 
+                </>
 
+            )
 
+        }
 
 
 
         function Good() {
 
         function Good() {
 
             console.log(this, 'this')
 
             console.log(this, 'this')
 
@@ -59,6 +59,7 @@
 
         }
 
         }
 
         const element = (
 
         const element = (
 
             <>
 
             <>
 
+                <LinkStyle />
 
                 <News />
 
                 <News />
 
             </>
 
             </>
 
         )
 
         )