Esta pregunta puede ser simple para la mayoría de los desarrolladores web, pero soy bastante nuevo y no puedo encontrar la manera de poner una función de tiempo de espera establecido en lo que me gustaría mostrar en una página. a continuación se muestra el ejemplo del código para el que me gustaría agregar un tiempo de espera.
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;y aquí está mi app.jsx que luego se exportará para usarse en index.js. Lo que quiero es tener, digamos, 5 segundos de retraso antes de que se muestre la función de la barra de navegación.
import React, { useEffect } from "react"; import Navbar from "./Navbar"; import Contact from "./Contact"; function App() { return ( <div> <Navbar /> <Contact /> </div> ); } export default App;Puede agregar setTimeout en su componente de aplicación. Debe tener un aspecto como este:
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;puede agregar un estado 'cargando' y agregar useEffect hook y luego usar setTimeout allí y cambiar el estado de carga a falso después de 5 segundos. en la sección de devolución, todo lo que necesita hacer es verificar si la carga es falsa; de lo contrario, no mostrará nada.
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;