Javascript 像旧的视频游戏一样，从我的React组件中的文本打印字母

我正试图让我的信件以大约500毫秒的速度打印到我的组件上。当阵列完成时，它们应该并排出现，但我没有任何运气实现这一点。它只是替换当前的字母，而且更改字母的时间太快。这是我试过的

import React, { Component } from "react";


class Printer extends Component {
  constructor(props){
    super(props)
    this.state = {
      arr: this.props.text,
      theText: undefined
    }
  }

  componentDidMount() {
    this.state.arr.forEach( (letter, index) =>
      setTimeout(()=>{
        console.log(letter)
        this.setState( {theText: {[index]: letter}})
      }, 1000)
    )

  }


  render() {
    return (
      <React.Fragment>
        <p>
          {this.state.theText && Object.values(this.state.theText).map( (letter, index) => <span>{letter}</span>)}
        </p>
      </React.Fragment>
    )
  }

}

export default Printer;

import React，{Component}来自“React”；
类打印机扩展组件{
建造师（道具）{
超级（道具）
此.state={
arr:this.props.text，
文本：未定义
}
}
componentDidMount（）{
this.state.arr.forEach（（字母、索引）=>
设置超时（（）=>{
控制台日志（字母）
this.setState（{文本：{[索引]：字母}）
}, 1000)
)
}
render（）{
返回(

{this.state.theText&&Object.values（this.state.theText.map）（（字母，索引）=>{letter}}

)
}
}
导出默认打印机；

也许你可以用这个npm软件包做到这一点

它提供了几个动画。如果你看这些例子，有一个垂直衰减效果，我已经检查过了，有一个垂直衰减。我还编辑了一个示例：

export class Wave2 extends React.Component {
constructor(props) {
  super(props);
  this.state = { paused: true };
  this.togglePause = this.togglePause.bind(this);
  this.reset = this.reset.bind(this);
}

togglePause() {
  this.setState(prevState => ({ paused: !prevState.paused }));
}

reset() {
  this.setState('paused', true);
}

render() {
return (
  <div style={exampleStyle}>
    <a onClick={this.togglePause} style={{cursor: 'pointer'}}>
      <Wave
        text="Click Me"
        effect="verticalFadeIn"
        effectChange={2.5}
        effectDirection='down'
        iterations={1}
        paused={this.state.paused}
      />
    </a>
    <br />
    <button style={buttonStyle} onClick={this.togglePause}>Reset</button>

    <div style={codeDivStyle}>
      <pre style={codeStyle}>
        &lt;Wave<br />
        &nbsp;&nbsp;text="Click Me"<br />
        &nbsp;&nbsp;effect="verticalFadeIn"<br />
        &nbsp;&nbsp;effectChange=&#123;2.5}<br />
        &nbsp;&nbsp;effectDirection='down'<br />
        &nbsp;&nbsp;iterations=&#123;1}<br />
        &nbsp;&nbsp;paused=&#123;this.state.paused}<br />
      />
      </pre>
    </div>
  </div>
)
}
}

导出类Wave2扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={暂停：true}；
this.togglePause=this.togglePause.bind（this）；
this.reset=this.reset.bind（this）；
}
切换暂停（）{
this.setState（prevState=>（{暂停：！prevState.paused}））；
}
重置（）{
this.setState（'paused'，true）；
}
render（）{
返回(


重置
波浪

text=“单击我”

effect=“verticalFadeIn”

效应变化={；2.5}

effectDirection='down'

迭代次数={；1}

暂停={；this.state.paused}

/>
)
}
}

希望有帮助。

我把你的代码放在这里

您遇到了一些问题，首先，如果您想使用setTimeout延迟显示，您应该通过索引增加延迟。因此，第一个调用在1s内执行，第二个调用在2s内执行，依此类推

此外，您还需要在功能上更新状态，这样您就可以获得上次状态更新的快照。您必须知道

setState

是异步的。在这里阅读更多。

---

这里是使用挂钩的起点

consttyper=（{speed=100，children}）=>{
const[idx，setidx]=React.useState（0）；
React.useffect（（）=>{
const timer=window.setInterval（（）=>setidx（v=>v+1），速度）；
return（）=>window.clearInterval（计时器）；
})
返回{children.substr（0，idx）}；
};
常量应用=（）=>
这是一些需要键入的文本
;
ReactDOM.render（，document.querySelector（#app））

---

这太棒了！非常感谢。这正是我想要的。（哦，谢谢你分享其他知识。今天我学到了更多！）

setTimeout(() => {
    console.log(letter);
    this.setState(state => ({
      theText: state.theText + letter
    }));
  }, 1000 * index)