使用 for 循环和 setTimeout 在 ES6 中修改 React Elements

Question

我正在尝试在我的 es6 组件中创建一个打字机动画 like this（本质上，迭代地呈现额外传递的元素或字母）。但是，任何时候我执行/渲染这个组件时，渲染的只是较大集合 'abc' 的第一个元素/字母 'a'。超时期限工作正常，所以我认为 for 循环失败了。我如何正确运行 for 循环遍历 es6 中的 setTimeout 函数，以便呈现我的新元素？谢谢

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>

使用 for 循环和 setTimeout 在 ES6 中修改 React Elements

Modify React Elements in ES6 using a for loop and setTimeout

javascript

settimeout

ecmascript-6

es6-modules