在React.js

Question

这个很难。我花了几天时间来解决这个问题，但我尝试的所有解决方案都不准确。

问题在于我正在尝试构建“打字文字效果”。这也应该处理句子的变化，即。第一个句子是打字的，然后它消失了，其他的句子又开始被打字，依此类推，它进入循环。这里的问题是，当第一句话结束时，我想将我的闪光灯暂时搁置一段时间，例如2秒钟。这似乎是使用setTimeout的理想场所，但遗憾的是我的所有试验都是错误的。

如果你能帮帮我，我真的很感激！谢谢

这是我的代码：

import React, { Component } from 'react';
import '../../sass/main.scss';

class TypeAnimation extends Component {
    constructor(props) {
        super(props);
        this.state = {
            sec: 0,
            sec2: 0,
            currentSentence: 0,
            blinker: '|',
        };
    }
    componentDidMount() {
        this.textInterval = setInterval(() => {
            this.setState(
                prevState => ({ 
                    sec: prevState.sec !== this.props.text[0].length ? prevState.sec + 1 : 0,
                    currentSentence: prevState.sec === this.props.text[0].length ?
                    prevState.currentSentence + 1 : prevState.currentSentence,
                })
            ); 
        }, 100);
    }


    render() {
        let otherSentences;
        const nextSentences = this.props.text; // here comes the array of few sentences
        const currentText = nextSentences[this.state.currentSentence];

        if (this.state.currentSentence !== nextSentences.length) {
            otherSentences = currentText.substr(0, this.state.sec);
        } else {
            clearInterval(this.textInterval);
            otherSentences = nextSentences[nextSentences.length - 1];
        }

        return (
            <div>
                <h2>
                    {otherSentences}
                    <span className='blinker'> {this.state.blinker} </span>
                </h2>
            </div>
        );
    }
}

export default TypeAnimation;