study6

react/study6/project/public/data.json

@@ -0,0 +1,27 @@
+[
+    {
+        "id":1,
+        "name": "图图",
+        "age": 3,
+        "address": "翻斗花园"
+    },
+    {
+        "id":2,
+        "name": "海绵宝宝",
+        "age": 5,
+        "address": "菠萝屋"
+    },
+    {
+        "id":3,
+        "name": "哆啦A梦",
+        "age": 30,
+        "address": "大雄家"
+    },
+    {
+        "id":4,
+        "name": "喜羊羊",
+        "age": 7,
+        "address": "青青草原"
+    }
+
+]

react/study6/project/src/components/Header.jsx

@@ -30,6 +30,9 @@ function Header() {
         <li>
           <NavLink className={handleTap} to="/shop">购物车</NavLink>
         </li>
+        <li>
+          <NavLink className={handleTap} to="/loading">加载页面</NavLink>
+        </li>
       </ul>
     </div>
   );

react/study6/project/src/pages/loading.css

@@ -0,0 +1,9 @@
+.vase {
+    border: 1px solid #000;
+    width: 300px;
+    border-collapse: collapse;
+    text-align: center;
+}
+.vase td,.vase th {
+    border: 1px solid #000;
+}

react/study6/project/src/pages/loading.jsx

@@ -0,0 +1,63 @@
+import { useState, useEffect } from "react";
+import './loading.css'
+function Word() {
+  return <div>正在加载中...</div>;
+}
+
+function Loading() {
+  let [list, setList] = useState([]);
+  let [load, setLoad] = useState(false);
+  useEffect(() => {
+    // 请求数据前展示loading样式
+    setLoad(true);
+    // http请求
+    fetch("/data.json")
+      .then((res) => res.json())
+      .then((arr) => {
+        setTimeout(() => {
+          setList(arr);
+        }, 2000);
+      })
+      .finally(() => {
+        setLoad(false);
+      });
+  }, []);
+  return (
+    <div>
+      <h3>这是一个案例</h3>
+      <table className="vase">
+        <thead>
+          <tr>
+            <th>##</th>
+            <th>名字</th>
+            <th>年龄</th>
+            <th>住址</th>
+          </tr>
+        </thead>
+        <tbody>
+          {/* 数据未加载时候 展示loading样式 */}
+          {/* 数据加载时 展示表格数据 */}
+          {/* 三元判断 */}
+          {list.length === 0 ? (
+            <tr>
+              <td>
+                <Word />
+              </td>
+            </tr>
+          ) : (
+            list.map((item, index) => (
+              <tr key={index}>
+                <td>{index + 1}</td>
+                <td>{item.name}</td>
+                <td>{item.age}</td>
+                <td>{item.address}</td>
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Loading;

react/study6/project/src/router/index.js

@@ -4,6 +4,7 @@ import About from '../pages/About';
 import Layout from "../layout/layout";
 import Shop from '../pages/shop.jsx'
 import Details from "../pages/details";
+import Loading from '../pages/loading.jsx'
 const route = [
     // 页面路由
     {
@@ -31,6 +32,10 @@ const route = [
             {
                 path:'shop/details',
                 element:<Details/>
+            },
+            {
+                path:'loading',
+                element: <Loading/>
             }
         ]
     }