使用for循環和setTimeout修改ES6中的React元素

Question

我想創建一個打字機動畫像這樣在我的ES6組件（本質上，反復地提供了額外的傳遞的元素或字母）。 但是，每次執行/渲染此組件時，渲染的所有內容都是較大集合的第一個元素/字母“a”，“abc”。 超時時間正常，所以我認為for循環失敗了。 如何在es6中的setTimeout函數上正確運行for循環，以便我的新元素將呈現？ 謝謝。

import React from 'react';
import { CSSTransitionGroup } from 'react-transition-group';
import Radium from 'radium';

export default class Logo extends React.Component {
  constructor(props) {
    super();
    this.state = {
      final: ''
    }
    this.typeWriter = this.typeWriter.bind(this);
  }

  typeWriter(text, n) {
    if (n < (text.length)) {
      let k = text.substring(0, n+1);
      this.setState({ final: k });
      n++;
      setTimeout( () => { this.typeWriter(text, n) }, 1000 );
    }
  }

  render() {
    this.typeWriter('abc', 0);
    return (
      <div>
        <h1>{this.state.final}</h1>
      </div>
    );
  }
}

module.exports = Radium(Logo);

Answer 1

由於this.typeWriter('abc', 0); 在render函數中，只要狀態發生變化，它就會運行typewriter方法，將狀態更新回a 。

移動this.typeWriter('abc', 0); 到componentDidMount() 。 它將在組件完成渲染時啟動類型編寫器。

 class Logo extends React.Component { constructor(props) { super(); this.state = { final: '' } this.typeWriter = this.typeWriter.bind(this); } typeWriter(text, n) { if (n < (text.length)) { let k = text.substring(0, n+1); this.setState({ final: k }); n++; setTimeout( () => { this.typeWriter(text, n) }, 1000 ); } } componentDidMount() { this.typeWriter('abc', 0); } render() { return ( <div> <h1>{this.state.final}</h1> </div> ); } } ReactDOM.render( <Logo />, demo ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="demo"></div>