[英]How to render a loading component with the useEffect hook?
I have a loading bar component which I can just import using this:我有一个加载栏组件,我可以使用它导入:
import { CircleToBlockLoading } from "react-loadingg";
and I am trying to use it like this which I am sure is incorrect as it renders nothing我正在尝试像这样使用它,我确信这是不正确的,因为它什么也没有
useEffect(() => {
const timer = setTimeout(() => {
return(
<CircleToBlockLoading />
)
}, 1000);
return () => clearTimeout(timer);
}, []); }, []);
Below are the links and documentation links for this external loading bar library:下面是这个外部加载条库的链接和文档链接:
This is the page for the live demos of several of these loading progress bar components这是其中几个加载进度条组件的现场演示页面
GitHub for these loading component bars GitHub 用于这些加载组件条
The loading bar library just lets you import the loading bar and use it as a component like:加载条库仅允许您导入加载条并将其用作组件,例如:
<LoadingBar />
Essentially I am trying to load and show the progress loading bar as the page loads using useEffect hook and then I am trying for it to be hidden and render the rest of the page data.本质上,我正在尝试使用 useEffect 钩子在页面加载时加载并显示进度加载栏,然后我试图将其隐藏并呈现页面数据的 rest。 Below is my code at App level where I am trying to achieve this as at App level I render the navbar and the home page etc.
下面是我在应用程序级别的代码,我试图在应用程序级别实现这一点,我呈现导航栏和主页等。
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;
Set a local state for tracking the loading.设置本地 state 用于跟踪加载。 Based on that show the loader or content.
基于该显示加载程序或内容。
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;
Let me know in case you have any doubts.如果您有任何疑问,请告诉我。
codesandbox - https://codesandbox.io/s/zealous-thunder-u2zj2?file=/src/App.js:0-730代码沙盒 - https://codesandbox.io/s/zealous-thunder-u2zj2?file=/src/App.js:0-730
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.