在特定时间间隔后渲染一个反应组件答案

【问题标题】：Render a react component after specific time interval在特定时间间隔后渲染一个反应组件
【发布时间】：2022-07-21 09:33:29
【问题描述】：

我有以下代码行。没有 setTimeout，一切正常。当我启用时，setTimeout，没有输出。

我做错了什么？

const PrintBox = ({posts,maximise,data}) => {


if ((posts)&& posts.postType === "printplease"

{

      setTimeout(function(){ 

   return <div>
         <h1>PrintPlease <h1>
          </div>
           
             
   
           },6000);

           }

现实世界的代码与此非常相似。每个帖子的时间取决于当前帖子（每个帖子都会更改..）

const PrintBox = ({posts, maximise}) => {

if ((posts)&& posts.postType === "printplease"

{

      setTimeout(function(){ 


<div >
             {(maximise === false)?
             (<div className="outerbox">
                 <div>
                     <div
                         className="container"
                     >
                        <Printbox
                      data ={data}
                         maximise ={maximise}
                         />
                     </div>
                 </div>
             </div>
             ):(<div className="outerbox outexpand"><div className= "container container-extend"
            >
                             <Printbox
                      data ={data}
                         maximise ={maximise}
                         />

            </div></div>)}
        </div>
             
             
             
             
             
              </div>



   },post.timing);

}


``

【问题讨论】：

请显示更多您的代码？这是功能性或类组件
你能复制更多的代码吗？这样做可能有更好的解决方案。
@TusharShahi ...它的功能组件
您的 HTML 需要基于变量的条件，您设置的超时将通过 useEffect 挂钩更改该变量的值
@ArseneWenger 检查新解决方案

标签： reactjs

【解决方案1】：

您可以使用布尔标志来实现这一点。看看这段代码

import React ,{useState , useEffect} from 'react'

export default const Component = () =>{
  const [canShow , SetCanShow] = useState(false)
  // Set Time out
  useEffect(()=>{
   const timer = setTimeout(function() {
        SetCanShow(true)
   }, 1000)
    return () => {
     clearTimeout(timer);
    };
  })
  
  return (
    {canShow ? <h1> visible </h1> : <> </>}
  )
}

【讨论】：

您忘记返回取消超时的清理函数

【解决方案2】：

由于 React 内部的工作方式，建议使用针对 React 渲染周期优化的钩子。

import { useEffect, useRef, useState } from "react";

function useTimeout(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      const id = setTimeout(tick, delay);
      return () => clearTimeout(id);
    }
  }, [delay]);
}

export default function App() {
  const [isIdle, setIdle] = useState(true);

  useTimeout(() => setIdle(false), 1000 * 3);
  return <div>{isIdle ? "Waiting..." : "Ready to print"}</div>;
}

演示预览 - https://codesandbox.io/s/xenodochial-wildflower-6r9e5g?file=/src/App.js:0-663

【讨论】：