Inicio Explorar Axuda
Iniciar sesión
lovecoding
/
W250511
10
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Explorar o código

react

zheng hai 13 horas
pai
ae0dd812ab
achega
9d35103888
Modificáronse 4 ficheiros con 190 adicións e 5 borrados
Dividir vista Mostrar estatísticas de Diff
  1. 5 5
      19.React/初阶/11.事件绑定.html
  2. 52 0
      19.React/初阶/15.计数器.html
  3. 64 0
      19.React/初阶/16.列表渲染.html
  4. 69 0
      19.React/初阶/17.条件渲染.html

+ 5 - 5
19.React/初阶/11.事件绑定.html
Ver ficheiro 

@@ -34,20 +34,20 @@
 
                 <div>
 
                     <h1 onClick={handleClick}>你好</h1>
 
                     <input type="text" onChange={handleChange} />
 
-                    <input type="text" onBlur={function() {
 
+                    <input type="text" onBlur={function () {
 
                         console.log('失焦')
 
-                    }}  />
 
+                    }} />
 
                     <input type="text" onBlur={() => {
 
                         console.log('失焦wwww')
 
-                    }}  />
 
+                    }} />
 
                     <button onClick={handleSubmit}>按钮</button>
 
                     <form action="" onSubmit={handleSub}>
 
                         <input type="text" value={xx} />
 
-                        </form>
 
+                    </form>
 
                 </div>
 
             )
 
         }
 
-        root.render(<App/>);
 
+        root.render(<App />);
 
     </script>
 
 </body>

+ 52 - 0
19.React/初阶/15.计数器.html
Ver ficheiro 

@@ -0,0 +1,52 @@
 
+<!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">
 
+        let root = ReactDOM.createRoot(document.getElementById("root"));
 
+        function App() {
 
+            return (
 
+                <Count count={5} />
 
+            )
 
+        }
 
+        class Count extends React.Component {
 
+            constructor() {
 
+                super();
 
+                this.state = {
 
+                    num: 50
 
+                }
 
+            }
 
+            handleAdd = () => {
 
+                this.setState((prevState, props) => {
 
+                    console.log(prevState, props)
 
+                    // num:10
 
+                    return { num: prevState.num + props.count }
 
+                })
 
+            }
 
+            render() {
 
+                let { num } = this.state;
 
+                return (
 
+                    <div>
 
+                        <h1>{num}</h1>
 
+                        <button onClick={this.handleAdd}>+</button>
 
+                        <br />
 
+                        <button>-</button>
 
+                    </div>
 
+                )
 
+            }
 
+        }
 
+        root.render(<App />);
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 64 - 0
19.React/初阶/16.列表渲染.html
Ver ficheiro 

@@ -0,0 +1,64 @@
 
+<!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">
 
+        let root = ReactDOM.createRoot(document.getElementById("root"));
 
+        function App() {
 
+            return (
 
+                <Count />
 
+            )
 
+        }
 
+        class Count extends React.Component {
 
+            constructor() {
 
+                super();
 
+                this.state = {
 
+                    list: [
 
+                        "图图",
 
+                        "哆啦A梦",
 
+                        "喜羊羊",
 
+                        "光头强"
 
+                    ]
 
+                }
 
+            }
 
+            render() {
 
+                // map、for、for in、for of、forEach、while、do while、some、every
 
+                let { list } = this.state;
 
+                let aa = list.map((item,index) => <li key={index}>{item}</li>)
 
+                return (
 
+                    <div>
 
+                        <h1>列表渲染</h1>
 
+                        <ul>
 
+                            {aa}    
+                        </ul>
 
+                        {/*
 
+                           list.map((item,index)=> {
 
+                            
+                        })
 
+                           */}
 
+                        {
 
+                            /*
 
+                             <ul>
 
+                                <li>{list}</li>    
+                            </ul>
 
+                            */
 
+                        }
 
+                    </div>
 
+                )
 
+            }
 
+        }
 
+        root.render(<App />);
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 69 - 0
19.React/初阶/17.条件渲染.html
Ver ficheiro 

@@ -0,0 +1,69 @@
 
+<!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">
 
+        let root = ReactDOM.createRoot(document.getElementById("root"));
 
+        function App() {
 
+            return (
 
+                <Count />
 
+            )
 
+        }
 
+        // if/else/else-if   switch-case  三元判断
 
+        /**
 
+         * 登录逻辑
 
+         * 用户 => 首页 
+         * 非用户 => 登录页
 
+         * 
+         * 本地存储
 
+        */
 
+        class Count extends React.Component {
 
+            constructor() {
 
+                super();
 
+                this.state = {
 
+                    token: JSON.parse(localStorage.getItem("token")),
 
+                    msg: {
 
+                        user: '图图',
 
+                        age: 3
 
+                    }
 
+                }
 
+            }
 
+            render() {
 
+                let { token, msg } = this.state;
 
+                return token ?
 
+                    <div>我叫{msg.user},今年{msg.age}</div>
 
+                    :
 
+                    <div>
 
+                        <h1>请登录</h1>
 
+                    </div>
 
+
 
+
 
+
 
+            }
 
+        }
 
+
 
+        // if (token) {
 
+        //     return <div>我叫{msg.user},今年{msg.age}</div>
 
+        // } else {
 
+        //     return (
 
+        //         <div>
 
+        //             <h1>请登录</h1>
 
+        //         </div>
 
+        //     )
 
+
 
+        // }
 
+        root.render(<App />);
 
+    </script>
 
+</body>
 
+
 
+</html>