React.js에서 지연을 추가하는 방법

React.js에서 지연을 추가하는 방법

React.js는 처음입니다.추가 방법을 잘 모르겠습니다.delayReact.js로 렌더링합니다.지연을 추가하는 가장 좋은 방법은 무엇입니까?

아래 코드를 렌더에 추가하지만 작동하지 않습니다.

setTimeout(function() {
   
}, 1000);

순수 타이프 스크립트 솔루션

지연 함수를 생성할 수 있습니다.async:

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

그런 다음 함수를 호출합니다.

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

왜 이런 일을 하고 싶은지 모르겠지만, 이런 거?

구성 요소의 생성자:

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.
    )
  }

따라서 타이머가 실행되면 렌더가 true로 설정됩니다.렌더가 저장되기 때문에state컴포넌트 재검출도 트리거 됩니다.그if진술은 간단히 지시한다.renderContainer상태 렌더가 참이 아니면 아무것도 표시하지 않습니다.컴포넌트가 로드 중임을 나타내는 텍스트를 표시할 수도 있습니다.renderContainer= false상단의 디폴트 선언renderContainer=<div>Component is loading..</div>예를들면.

리액트 후크 포함.기다릴게요5s이 컴포넌트를 렌더링합니다.

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>
   )
}

1초 후에 버튼을 클릭하면 렌더링 상태가 true로 설정되고<Component />가 표시됩니다.

컴포넌트 로드 시 set Timeout을 실행하고 버튼을 클릭하지 않으면 실행할 수 있습니다.componentDidMount라이프 사이클은 다음과 같습니다.

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

컴포넌트를 렌더링하는 방법을 완전히 이해하셨기를 바랍니다.

setTimeout에서 후크를 사용하는 방법 중 하나는 간격 후에 속성을 설정하는 것입니다.

import { useState, useEffect } from "react";

const BotResponse = () => {

......

const [botMessage, setBotMessage] = useState('');

// function called from some user interaction
const botResponse = (msg) => {
   setTimeout(function() {
      setBotMessage(msg);
   }, 500);
};

useEffect(() => {
    console.log("bot msg... " + botMessage);

    // display the bot message

}, [botMessage]); // listening to a change on this property
}

언급URL : https://stackoverflow.com/questions/42089548/how-to-add-delay-in-react-js