Reactjsを使用してタグでhtmlタグを遅延表示する

Question

私は多くの時間を読んで解決しようとしているが問題はない。

は、私はこのようなチャットをシミュレートする必要があります。

をしかし、私は、彼らは常に同時に表示し、泡の各1間の遅延を実行する方法を見つけることができない、私がしようとしましたsetTimeoutのようなオンラインで見つかった多くの機能を使用して、約束などで睡眠を待っています。それらのどれも働いていない、バブルはいつも同じ時間に何度も表示され、遅延時間自体は何も表示されません。

どうすればいいですか？私はこれを行う方法を知る必要があります。だから、基本的に私はReactjsに「2秒後に空のページを表示し、最初のバブルを表示し、2秒後に2番目のバブルを表示する」ということを知る必要があります。

コード例：使用の状態：

render(){ 
return(
<div> 
    <BubbleUs>Your account was created</BubbleUs> 
    <BubbleUs>Now, its time to choose your payment method</BubbleUs> 
</div> 
) 
} 

おかげでたくさんの人：ステートを使用していない

renderChat(){ 
      let bubbles = this.state.bubbles; 
      if(this.state.renderSecondBubbles){ 
       bubbles.push(this.renderBubbleResponse(this.state.name)); 
       bubbles.push(<BubbleUs><p>Hello {this.state.name}</p></BubbleUs>) 
      }else{ 
       if(this.state.renderFirstBubbles){ 
        bubbles.push(<BubbleUs><p>Hello</BubbleUs>) 
        bubbles.push(<BubbleUs><p>What is your name?</p></BubbleUs>) 
       } 
       } 
} 

render(){ 
return(
    <div> 
    {this.renderChat()} 
    </div> 
) 
} 

例。

Answer 1

私は確かにあなたからいくつかのコードが必要です。これらのバブルをいくつかの状態ツリーに基づいてレンダリングしますか、またはコンポーネントrender()メソッドでそのまま作成しますか？

秒1であれば、私はあなたがコンポーネントでlifecycle methodsを使用して、タイムアウト応答をシミュレートすることができると信じて：

import React from 'react'; 

export class SampleMessages extends React.Component { 
    contructor(props) { 
    super(props); 

    this.state = { 
     interval: null, 
     messages: [] 
    }; 
    } 

    componentDidMount() { 
    const interval = setInterval(() => { 
     const newMessages = this.state.messages.concat([ 'New message' ]); 

     this.setState({ messages: newMessages }); 
    }, 1000); 

    this.setState({ interval }); 
    } 

    componentWillUnmount() { 
    clearInterval(this.state.interval); 
    } 

    render() { 
    const { messages } = this.state; 

    return (
     <div> 
     {messages.map((text, index) => 
      <p key={Math.random() + index}> 
      {text} 
      </p> 
     } 
     </div> 
    ); 
    } 
}