在反應組件中每1.5秒更換/洗牌文本

Question

我是新來做出反應的，我想爲我的應用程序的主屏幕做一些基本操作。

我想用指定數組在給定段落中每1.5秒更改一次最後一段文字。稍後我會添加一些動畫，但現在我只想做基礎知識。

在我的反應成分，我有這樣的事情：

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(){ \t \t 
 
     if(counter == text.length -1){ 
 
      t = window.clearInterval(t); 
 
     } 
 
     setTimeout(function(){ 
 
      //change markup to next the next string 
 
      thisEl.innerHTML = text[counter]; 
 
      counter++; \t \t \t \t \t \t 
 
     },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>

Answer 1

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 = setTimeout(() => { 
     let currentIdx = this.state.textIdx; 
     this.setState({ textIdx: ++currentIdx }); 
    }, 1500); 
    } 

    componentDidUnmount() { 
    clearTimeout(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; 

Answer 2

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;