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

我的React应用程序中有两个组件。其中一个是用于初始加载的,其中将显示一些加载动画,我希望此动画能够渲染大约三秒钟,而另一个组件只是我要在第一个动画之后渲染的计数器。我该如何使用useEffect()和setTimeOut()? (或任何其他方法)

function App() {
  return(
     <>
       <Loading />
       <Counter />
     </>
  )
}
评论
  • Wade
    Wade 回复

    If you use setInterval(), below would be fine

    const App = () => {
      const [loading, setLoading] = React.useState(true);
      React.useEffect(() => {
        const interval = setInterval(() => {
          setLoading(false);
        }, 3000);
        return () => clearInterval(interval);
      }, []);
      return (
        <div className="App">{loading ? <h1>Loading</h1> : <h2>Counter</h2>}</div>
      );
    }
    ReactDOM.render(<App />, document.getElementById("root"));
    <div id="root"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
  • ㈠个
    ㈠个 回复

    干得好 :

    This is just a code snippet showing useEffect and setTimeout, in your case you can use real component instead of string in below.

    只需运行摘要,希望它可以清除您的想法:

    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>
  • podio
    podio 回复

    您可以将状态道具设置为布尔值,让您有条件地渲染计数器。所以举个例子

    this.state = {
        isCounterVisible: false
    }
    

    那么您应该定义一个函数,以所需的延迟开始超时,例如

    makeCounterVisible() {
        setTimeout(() => {
            this.setState({isCounterVisible: true})
       }, 3000)
    }
    

    然后,您从useEffect钩子调用此方法,并记住将空数组作为第二个参数传递,这样它只能运行一次

    useEffect(() => {
      this.makeCounterVisible();
    }, []);
    

    最后,添加渲染条件,如下所示

      return(this.state.isCounterVisible ? <Counter /> : <Loading />)
    
  • gcum
    gcum 回复

    You can create a component state which will first render the Loading component for 3 sec and then Counter component. Something like this

    const Demo = () => {
      const [showLoader, setLoader] = useState(true);
    
      useEffect(() => {
        setTimeout(() => {
          setLoader(false);
        }, 3000);
      }, []);
    
      if (showLoader) {
        return <Loading />;
      }
    
      return <Counter />;
    };
    

    Live demo here: https://codesandbox.io/s/react-example-fo3ju?file=/index.js:179-416