您可以简单地使用useEffect()钩子，它将在每次重新呈现（随机延迟）后增加文本的可见部分（存储在组件的状态中），直到整个文本被删除。
您可以在下面找到此概念的现场演示：

const { useState, useEffect } = React,
      { render } = ReactDOM
      

const srcString = `That's the text I'm going to print out`

const Typewriter = ({srcString}) => {

  const [{content,carriage}, setContent] = useState({content:'',carriage:0})
       
  useEffect(() => {
    if(carriage == srcString.length) return
    const delay = setTimeout(() => {
      setContent({content:content+srcString[carriage], carriage: carriage+1})
      clearTimeout(delay)
    }, 0|(Math.random()*200+50))
  }, [content])
  
  return <span>{content}<span className="cursor">|</span></span>
  
}

render (
  <Typewriter {...{srcString}} />,
  document.getElementById('root')
)

.cursor{animation:1s blink step-end infinite}@keyframes blink{from,to{color:transparent}50%{color:#000}}@-moz-keyframes blink{from,to{color:transparent}50%{color:#000}}@-webkit-keyframes blink{from,to{color:transparent}50%{color:#000}}@-ms-keyframes blink{from,to{color:transparent}50%{color:#000}}@-o-keyframes blink{from,to{color:transparent}50%{color:#000}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

输入逻辑是好的，但是，注意setTimeout是异步的，所以它不会等待整个单词被输入后再切换到下一个单词。解决方案是使整个输入流程异步，这样您就不会在前一个单词输入之前切换到下一个单词。
下面是sandbox demo：https://codesandbox.io/s/boring-greider-824nd
主要的变化是这样的：

if (string.length === 0) {
  words = words.slice(1);
  words[0] && this.typeWord(words[0], words);
}

检查我们是否完成了输入一个单词，然后将其切片，以获得下一个单词。如果我们还有单词，我们调用typeWord，其中包含应该输入的单词和接下来应该输入的单词数组。如果没有剩余的单词，我们退出键入。

是的，setTimeout()在处理需要同步执行的任务时可能会很棘手（比如打字效果）。
下面是使用async/await的另一种方法。我将typeWriter方法设置为异步，因此它只会在字符串中的所有字符都被键入后返回。之后，将允许键入NEXT字符串。要实现这一点，stringChecker也需要异步。检查一下，让我知道如果有什么困惑。
https://codesandbox.io/s/youthful-davinci-d5bk5?fontsize=14&hidenavigation=1&theme=dark
另外......如果你只是想让它运行起来，我做了一个TypeIt，一个JS类型库，还有一个React组件版本。如果有用，请查看：
https://github.com/alexmacarthur/typeit-react

这对我很有效，我写的一个小的自定义钩子

export const useTypeWriter = (content = '') => {
    const [prevContent, setPrevContent] = useState(content);
    const [animatedContent, setAnimatedContent] = useState('');
    const hasContentChanged = prevContent === content;

    const generateContent = () => {
        setAnimatedContent((prevAnimatedContent) => {
            const charCount = prevAnimatedContent.length;
            if (prevAnimatedContent.length + 1 !== content.length) setTimeout(generateContent, 90);

            return prevAnimatedContent + content[charCount];
        });
    };

    useEffect(() => {
        if (!hasContentChanged) return;

        setPrevContent(content);
        generateContent(content);
    }, [hasContentChanged]);

    return animatedContent;
};