通過標籤顯示html標籤，延遲使用Reactjs

Question

我有一個問題，我花了很多時間閱讀並試圖解決，但沒有工作。

我必須模擬這樣的聊天：

但我不能找到一個方法來做到氣泡的每一個之間的延遲，他們始終顯示在同一時間，我試着使用我在網上找到的很多功能，比如setTimeout，等待睡眠和承諾等。他們都沒有工作，氣泡總是同時顯示，很多時候延遲本身甚至不工作，它們在延遲時間結束之前顯示。

做任何人有一個想法如何做到這一點？我只需要知道如何做到這一點我自己的工作邏輯。所以基本上我需要知道如何對Reactjs說：「在2秒後顯示一個空白頁面，顯示第一個泡泡，2秒後顯示第二個泡泡」。

代碼示例：使用狀態：

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

例未使用狀態：

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

感謝很多人。

Answer 1

我們肯定會需要一些代碼。你是基於某種狀態樹渲染這些氣泡，還是直接在組件render()方法中創建它們？

如果第二個，我相信你可以在組件使用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> 
    ); 
    } 
}