reactjs - 使用 useEffect() 和 setTimeOut() 进行条件渲染

Question

我的 React 应用程序中有两个组件。其中一个用于初始加载，将显示一些加载动画，我希望这个渲染大约三秒钟，另一个组件只是我想在第一个之后渲染的计数器。我如何使用 useEffect() 和 setTimeOut() 来做到这一点？ (或使用任何其他方法)

function App() {
  return(
     <>
       <Loading />
       <Counter />
     </>
  )
}

Answer 1

给你:

这只是显示 useEffect 和 setTimeout 的代码片段，在您的情况下，您可以使用真实的组件而不是下面的字符串。

只需运行该代码段，希望它能清除您的想法:

const { useState , useEffect } = React;

const App = () => {

  const [loading,setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    },3000);
  },[]);

  return (
    <div>
      { loading ? "Loading Component (will be gone in 3 secs)...." : "Counter Component"}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('react-root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>