Question

我正在尝试在我的es6组件中创建一个打字机动画like this（基本上，迭代地渲染其他传递的元素或字母）。但是，每次执行/渲染此组件时，渲染的所有内容都是第一个元素/字母，＆＃39; a＆＃39;，更大的集合，＆＃39; abc＆＃39;。超时时间正常，所以我认为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>

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

1 个答案: