javascript - 如何使用 useEffect 钩子(Hook)渲染加载组件？

Question

我有一个加载栏组件，我可以使用它导入:

import { CircleToBlockLoading } from "react-loadingg";

我正在尝试像这样使用它，我确信这是不正确的，因为它不会渲染任何内容

useEffect(() => {
const timer = setTimeout(() => {
  return(
  <CircleToBlockLoading />
  )
}, 1000);
return () => clearTimeout(timer);

}，[]);

以下是此外部加载栏库的链接和文档链接:

This is the page for the live demos of several of these loading progress bar components

GitHub for these loading component bars

加载栏库仅允许您导入加载栏并将其用作组件，例如:

<LoadingBar />

本质上，我正在尝试使用 useEffect 钩子(Hook)加载页面时加载并显示进度加载栏，然后我尝试将其隐藏并呈现页面数据的其余部分。下面是我在应用程序级别的代码，我试图在应用程序级别实现此目的，因为我在应用程序级别渲染导航栏和主页等。

import "./App.css";
import React from "react";
import NavRouter from "./components/NavRouter";
import { CircleToBlockLoading } from "react-loadingg";
import { useRef, useEffect } from "react";


const App = () => {
const ref = useRef(null);
useEffect(() => {
const timer = setTimeout(() => {
  return(
  <CircleToBlockLoading />
  )
 }, 1000);
 return () => clearTimeout(timer);
 }, []);

return (
 <>
   {/* <CircleToBlockLoading /> */}
   <LoadingBar color="#0edaaf" ref={ref} />
   <NavRouter />
 </>
 );
};
// adding comment
 export default App;

Answer 1

设置用于跟踪加载的本地状态。基于此显示加载程序或内容。

import "./styles.css";

// import "./App.css";
import React, { useState } from "react";
// import NavRouter from "./components/NavRouter";
import { CircleToBlockLoading } from "react-loadingg";
import { useRef, useEffect } from "react";

const App = () => {
  const ref = useRef(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      // return(
      // <CircleToBlockLoading />
      // )
      setLoading(false);
    }, 5000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <>
      {(!loading && <div>MY CONTENT</div>) || (
        <CircleToBlockLoading color="#0edaaf" ref={ref} />
      )}
    </>
  );
};
// adding comment
export default App;

如果您有任何疑问，请告诉我。

codesandbox - https://codesandbox.io/s/zealous-thunder-u2zj2?file=/src/App.js:0-730