使用 setTimeout ( ReactJs ) 在一段时间后渲染一个组件

Question

我想在使用 setTimeout 一段时间后在我的 App.Js 中渲染一个组件，有什么方法可以做到吗？

当我尝试时，没有任何反应...

我的代码：

function App() {
  return (
    <Router>
      <GlobalStyle />

      <SearchProvider>
        <Header />

        <Switch>
          <Route exact path="/">
            {setTimeout(() => {
              return;
              <>
                <InitialLoad />
                <Home />
              </>;
            }, 1200)}
          </Route>

          <Route exact path="/series">
            <Series />
          </Route>
          <Route exact path="/movies">
            <MoviesPage />
          </Route>
          <Route exact path="/popular">
            <PopularPage />
          </Route>
          <Route exact path="/resultado-de-busca">
            <SearchPage />
          </Route>
        </Switch>
      </SearchProvider>
    </Router>
  );
}

希望我的 InitialLoad 和 Home 组件在 1200 次后显示，但没有任何反应，请问我该如何解决？

Answer 1

路由就是根据你的路径选择渲染什么组件(URL)。如果你想刷新你的组件，你需要改变状态值，或者来自父级的道具值。

尝试这样的事情：

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [isHide, setIsHide] = useState(true);

  setTimeout(() => setIsHide(false), 5000);

  return (
    <div className="App">
      <h1>testing delay render</h1>
      {!isHide ? <div>show after 5 seconds</div> : null}
    </div>
  );
}

Answer 2

你最好的选择可能是在 React 中使用钩子。本质上是像往常一样在 App.js 中创建您的组件 <InitialLoad /> <Home />，但在开始时设置 display:none，然后让您的 setTimeout() 更改状态并显示您的组件。

这篇文章可能有帮助 https://reactgo.com/settimeout-in-react-hooks/

Answer 3

如果您想在路线中这样做：

import { useState } from "react";

function App() {

const [isDisplayed, setIsDisplayed] = useState(false);

useEffect(() => {
  setInterval(() => {
    setIsDisplayed(true);
  }, 1200);
}, []);

return (
    <Router>
      <GlobalStyle />

      <SearchProvider>
        <Header />

        <Switch>
          <Route exact path="/">
            {isDisplayed &&
              <>
                <InitialLoad />
                <Home />
              </>;
            }
         </Route>
      //the rest of your component

使用 setTimeout ( ReactJs ) 在一段时间后渲染一个组件

render a component after some time with setTimeout ( ReactJs)

javascript

settimeout

reactjs