不知道你为什么要这样做，但像这样的事情？

组件的构造函数：

constructor(props) {
    super(props);
    this.state = {
        render: false //Set render state to false
    }
}

在组件安装上：

componentDidMount() {
  setTimeout(function() { //Start the timer
      this.setState({render: true}) //After 1 second, set render to true
  }.bind(this), 1000)
}

渲染方法：

render() {
    let renderContainer = false //By default don't render anything
    if(this.state.render) { //If this.state.render == true, which is set to true by the timer.
        renderContainer = <div>Look at me! I'm content!</div> //Add dom elements
    }
    return (
      renderContainer //Render the dom elements, or, when this.state == false, nothing.
    )
  }

所以当定时器触发时，render 设置为 true。因为渲染存储在状态中，这也会触发组件的重新渲染。if 语句只是指示 renderContainer 不显示任何内容，除非状态 render 为真。您还可以显示一个文本指示组件正在加载，而不是renderContainer= false在顶部声明renderContainer=<div>Component is loading..</div>，例如声明默认值。

纯typescript解决方案

您将能够创建延迟功能 async

function timeout(delay: number) {
    return new Promise( res => setTimeout(res, delay) );
}

然后调用函数

await timeout(1000); //for 1 sec delay

使用 React 钩子。它将等待 5 秒，然后渲染此组件。

import React from 'react'

const DeleayComponent = () => {
  const [show, setShow] = React.useState(false)

  React.useEffect(() => {
    const timeout = setTimeout(() => {
      setShow(true)
    }, 5000)

    return () => clearTimeout(timeout)

  }, [show])

  if (!show) return null

  return <>OK, Render</>
}

export default DeleayComponent

一段时间后显示组件的最简单方法是条件渲染，如下所示：

constructor(props) {
    super(props);
    this.state = {
        render: false 
    }
}

handleRender = () => {
  setTimeout(() => {
     this.setState({ render : !this.state.render })
  }, 1000);
}

render () {
   return (
          <div>
             <button onClick={handleRender}>Set render to true</button>
             { this.state.render ? <Component /> : null }
          </div>
   )
}

当您在一秒钟后单击按钮时，它会将渲染状态设置为 true 并<Component />显示 。

如果您想在组件加载时运行 setTimeout 而不是单击按钮，您可以componentDidMount像这样在生命周期中使用它：

componentDidMount(){
  setTimeout(() => {
     this.setState({ render : !this.state.render })
  }, 1000);
}

希望您完全理解如何实现这种渲染组件的方式。