当我的组件正在加载时，如何在 React js 中添加加载微调器？

Question

我用 React js 创建了一个网络应用程序。我每件事都做得很好，网站运行得很好。虽然运行良好，但我需要修改一些东西。就像当我访问导航链接时，加载组件需要很少的时间。所以我想在加载组件时显示一个微调器。我怎样才能做到这一点？有什么办法可以做到这一点吗？

Answer 1

使用 Mui

circularprogress

并创建一个名为 isFetching 的状态（在获取所有内容后将关闭该状态）

对于 mui（请参阅：https://mui.com/material-ui/react-progress/#circular-independent）

import React, { useState, useEffect } from "react";
import CircularProgress from "@mui/material/CircularProgress";
import Box from "@mui/material/Box";

export default function App() {
  const [isFetching, setIsFetching] = useState(true); 

  useEffect(() => {
    setTimeout(function () {
      console.log("Delayed for 5 second."); 
      setIsFetching(false); 
    }, 5000);
  }, []);

  if (isFetching) {
    return (
      <Box sx={{ display: "flex", justifyContent: "center" }}>
        <CircularProgress />
      </Box>
    );
  }

  return <div>content....</div>;

示例：

https://codesandbox.io/s/vigilant-water-e6l0bk?file=/src/App.js:0-571

我使用 setTimeout 来替代 API 获取调用。 5 秒后，内容将加载，否则屏幕上会显示一个旋转图标。

Answer 2

您可以维护组件中的状态。最初，可以将其设置为 true。每当您进行 API 调用时，您都可以根据响应来根据需要更改状态。基于此状态，您可以渲染旋转器或内容。

Answer 3

从“../components/SpinnerLoader.jsx”导入SpinnerLoader；