如何在 React 组件上使用 setTimeout

Question

这个问题对大多数 Web 开发人员来说可能很简单，但我是新手，无法弄清楚如何将 settimeout 函数放在我想在页面上显示的内容上。下面是我想为其添加超时的代码示例。

import React from "react";

function Navbar() {
  return (
    <div className="navbar">
      <h4>
        <a href="#contact">Contact</a>
      </h4>
      <h4>About Me</h4>
    </div>
  );
}

export default Navbar;

这是我的 app.jsx ，然后将其导出以用于 index.js 。我想要的是在我的导航栏功能显示之前有 5 秒的延迟。

import React, { useEffect } from "react";
import Navbar from "./Navbar";
import Contact from "./Contact";

function App() {
  return (
    <div>
      <Navbar />
      <Contact />
    </div>
  );
}
export default App;

Answer 1

您可以在应用程序组件中添加 setTimeout。它应该是这样的：

import React, { useState, useEffect } from "react";
import Navbar from "./Navbar";
import Contact from "./Contact";

function App() {
  const [showNavBar, setShowNavBar] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setShowNavBar(true);
    }, 5000);
    return () => clearTimeout(timer);
  }, [])

  return (
    <div>
      {showNavBar ? <Navbar /> : null}
      <Contact />
    </div>
  );
}
export default App;

Answer 2

您可以添加状态 'loading' 并添加 useEffect 挂钩，然后在那里使用 setTimeout 并在 5 秒后将加载状态更改为 false。在 return 部分，您需要做的就是检查加载是否为假，否则您将显示任何内容。

import React, { useEffect, useState } from "react";
import Navbar from "./Navbar";
import Contact from "./Contact";

function App() {

  const [loading, setLoading] = useState(true);
  
   useEffect(() => {
   setTimeout(() => {
     setLoading(false);
   }, 5000);
  }, [])

  return (
    <div>
     {!loading && <Navbar /> } 
      <Contact />
    </div>
  );
}
export default App;

如何在 React 组件上使用 setTimeout

how to use setTimeout on a react component

javascript

reactjs