Javascript 使用Reactjs以延迟方式逐个显示html标记

我有一个问题，我花了很多时间阅读和试图解决，但没有工作

我必须模拟这样的聊天：

但是我找不到一种方法在每个泡泡之间进行延迟，它们总是同时显示，我尝试使用我在网上找到的很多功能，比如设置超时、带承诺等待睡眠等。它们都不起作用，泡泡总是同时显示，很多时候延迟本身甚至不起作用，它们在延迟时间结束前显示

有人知道怎么做吗？我只需要知道如何做到这一点的逻辑我自己工作。所以基本上我需要知道如何对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>
 )
}

renderChat（）{
让气泡=this.state.bubbles；
if（this.state.renderSecondBubbles）{
bubbles.push（this.renderBubbleResponse（this.state.name））；
bubbles.push（Hello{this.state.name}
）
}否则{
if（this.state.renderFirstBubbles）{
泡泡。推（Hello）
泡泡。推（你叫什么名字？
）
}
}
}
render（）{
返回(
{this.renderChat（）}
)
}

不使用状态的示例：

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

render（）{
返回(
您的帐户已创建
现在，是时候选择你的付款方式了
)
}

---

非常感谢大家。

我们当然需要您提供一些代码。您是基于某种状态树渲染这些气泡，还是直接在组件

render（）

方法中创建它们

如果是第二个，我相信您可以使用组件中的模拟超时响应：

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

从“React”导入React；
导出类SampleMessages扩展React.Component{
建筑商（道具）{
超级（道具）；
此.state={
间隔：空，
信息：[]
};
}
componentDidMount（）{
常量间隔=设置间隔（（）=>{
const newMessages=this.state.messages.concat（['newmessage']）；
this.setState（{messages:newMessages}）；
}, 1000);
this.setState（{interval}）；
}
组件将卸载（）{
clearInterval（this.state.interval）；
}
render（）{
const{messages}=this.state；
返回(
{messages.map（（文本，索引）=>

{text}

}
);
}
}

这是一条评论，不是答案。这是真的，抱歉@JoeClay，在我有两种情况下编辑了可能的答案，有部分使用状态呈现，但在其他页面仅呈现，我将用我的代码示例更新答案。