IT技术 - 在react组件中每 1.5 秒更改/改组文本 - 吾爱随笔录

我是react的新手，我想为我的应用程序的主屏幕做一些基本的事情。

我想每 1.5 秒使用给定数组更改给定段落中的最后一个文本。稍后我将添加一些动画，但现在我只想做基础。

在我的react组件中，我有这样的东西：

import React, { Component } from 'react';
import './Home.css';

class Home extends Component {

  render() {
    let textArray = ['eat', 'sleep', 'drink', 'snore', 'foo', 'buzz', 'whatever'];
    let textThatChanges;

    for (var i = 0; i < textArray.length; i++) {
      textThatChanges = textArray[i];
    }

    return (
      <section>
        <h1>Hello, my name is Barry Allen</h1>
        <p>I like to <span> {textThatChanges}</span></p>
      </section>
    );
  }
}

export default Home;

在普通的 jquery 中，它看起来像下面这样：

textShuffle = function(element, text, timer){
  var thisEl = document.getElementById(element),
    counter = 0,
    t = setInterval(function(){		
        if(counter == text.length -1){
            t = window.clearInterval(t);
        }
        setTimeout(function(){
            //change markup to next the next string
            thisEl.innerHTML = text[counter];
            counter++;						
        },310);
    }, timer);
  }
  
  
  
var shuffle1 = new textShuffle('foo', 
                               ['eat', 'sleep', 'drink', 'snore', 'foo', 'buzz', 'whatever'],
                               1500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
  I like to <span id='foo'>Play</span>
</h1>

import React, { Component } from 'react'; import './Home.css'; const textArray = ['eat', 'sleep', 'drink', 'snore', 'foo', 'buzz', 'whatever']; class Home extends Component { constructor() { super(); this.state = { textIdx: 0 }; } componentDidMount() { this.timeout = setInterval(() => { let currentIdx = this.state.textIdx; this.setState({ textIdx: currentIdx + 1 }); }, 1500); } componentDidUnmount() { clearInterval(this.timeout); } render() { let textThatChanges = textArray[this.state.textIdx % textArray.length]; return ( <section> <h1>Hello, my name is Barry Allen</h1> <p>I like to <span>{textThatChanges}</span></p> </section> ) } } export default Home;

import React, { Component } from 'react'; import './Home.css'; class Home extends Component { componentDidMount(){ //setup your timer here. //in your timer, call setState on this //something like this.setState({textThatChanges:YourText}); } render() { return ( <section> <h1>Hello, my name is Barry Allen</h1> <p>I like to <span> {this.state.textThatChanges}</span></p> </section> ); } } export default Home;