Question

我是Reactjs的新手。我不确定如何在delay中添加Reactjs进行渲染。添加延迟的最佳方式是什么。

我在渲染中添加了以下代码，但它无效。

setTimeout(function() {

}, 1000);

Answer 1

不确定你为什么要这样做，但这样的事情呢？

组件的构造函数：

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不显示任何内容。您还可以显示指示组件正在加载的文本，而不是在顶部声明renderContainer= false，例如将默认值声明为renderContainer=<div>Component is loading..</div>。

Answer 2

纯打字稿解决方案

您将可以使用async

创建延迟功能

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

然后调用该函数

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

Answer 3

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

isset()

Answer 4

一段时间后显示组件的最简单方法是这样的条件渲染：

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

handleRender = () => {
  setTimeout(function() {
     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(function() {
     this.setState({ render : !this.state.render })
  }, 1000);
}

希望您完全了解如何实现这种呈现组件的方式。

如何在Reactjs

4 个答案: