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

使用Reactjs按标签显示html标记

1 个答案: