如何在反應組件上使用 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

您可以在您的 App 組件中添加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

您可以添加狀態“正在加載”並添加 useEffect 鈎子，然后在那里使用 setTimeout 並在 5 秒后將加載狀態更改為 false。 在返回部分，您需要做的就是檢查加載是否為假，否則將不顯示任何內容。

 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;