如何使用React-javascript完成登陆网站动画和显示网站主页

我想在2-3秒后结束登录页动画并显示主页。那么如何结束加载动画并显示它呢。有什么方法可以调用setTimeOut吗？ [

---

导出默认加载程序；

首先，我想知道，如果页面在之前完全加载，为什么要让用户等待2-3秒？我的意思是，这会对用户体验产生巨大影响，我完全不建议这样做。现在的性能是每个企业的关键绩效指标

除此之外，如果您真的想创建它，我会在父组件中创建一个状态，在那里它在这些秒内呈现

Loader

组件，然后切换到

Mainpage

组件。对于服务器的异步请求，您可以这样认为（需要2-3秒），我们如何模仿呢？如您所述，使用

setTimeout

函数

因此，在父组件中，代码如下所示：

const ParentComponent = () => {
  const [loading, setLoading] = useState(true) // generally when doing http requests this is false initially and when starting the request you set it to true, but this case is a bit different

  useEffect(() => {setTimeout(() => {setLoading(false)}, 2000)}, []) // this will execute the code inside the effect once the component is rendered - same as componentDidMount() in class-based components.

  return loading ? <Loader /> : <MainPage />

constparentcomponent=（）=>{
const[loading，setLoading]=useState（true）//通常在执行http请求时，最初为false，在启动请求时将其设置为true，但这种情况有所不同
useEffect（（）=>{setTimeout（（）=>{setLoading（false）}，2000）}，[]）//一旦呈现组件，这将在效果中执行代码-与基于类的组件中的componentDidMount（）相同。
返回装载？：

就这样

p、 d：记住，钩子是在功能组件内部使用的，因为您在它上面使用它。

---

此外，您还可以将css作为

import./styles/asd.css“

导入。这是一个css代码。正文{边距：0px；填充：0px；高度：100vh；}.loader{过渡：所有线性0.3s；背景：#111；宽度：100%；高度：100%；显示：flex；对齐内容：中心；对齐项目：中心；}.loader div{背景：#fff；宽度：16px；高度：32px；左边距：10px；过渡：所有300ms；动画：loader 1.2s无限；}请参阅。代码的图像是不可接受的，请将您的问题包括代码本身。请阅读，并将您的问题作为文本包含代码和数据，而不是图像。谢谢您Agustin的时间。我也尝试过这种方法。但我遇到了类似这样的错误“要修复，请取消useEffect清理函数中的所有订阅和异步任务。在登录页面（由ConnectFunction创建）中，在ConnectFunction（由Context.Consumer创建）”中。因此，我使用了另一种方法，它工作了useEffect（（）=>{const timer=setTimeout（（）=>{props.history.push（”/dashboard”）；}，2000）；return（）=>props.history.push（“/dashboard”）；}，[]）；酷！如果合适，请将答案标记为正确