React.jsカルーセル効果

Question

編集：私はユーバー食べるのページで見られているためつもりだ効果：https://ubereats.com/sf/

私はテキストがページで入力されているように見せかけるためにパッケージを実装しました。 、私がやりたい何

var typedtext = [ 
    {id: 'home', text: 'home', link: 'home'}, 
    {id: 'something', text: 'something', link: 'something'}, 
    {id: 'dev', text: 'dev', link: 'dev'}, 
    {id: 'another', text: 'another', link: 'another'}, 
]; 

テキストの行があるときになるように」それを持っている：私はこれに供給JSON配列オブジェクトを持っている

Typing = React.createClass({ 

    getInitialState: function() { 
     return { textIndex: 0 }; 
    }, 

    next: function() { 
    // increment the textIndex by one 
    this.setState({ textIndex: this.state.textIndex + 1}); 
    }, 

    render: function() { 
    const docs = '#one'; 
    return (

     <div> 
       <div className="TypistExample"> 

       <Typist className="TypistExample-header" avgTypingSpeed={15000} startDelay={1000} cursor={{show: false}} onTypingDone={this.next}> 
        { typedtext.map(function(t){ 
        return <h1 className={t.id} key={t.id}><a target="_blank" href={t.link}>{t.text}</a></h1> 
        }) } 
       </Typist> 

       </div> 
     </div> 

    ); 
    } 

}); 

：それはこのようになります型付けされた "、それはしばらくの間そこにとどまり、次に消え去り、配列の次のオブジェクトのためのスペースを作ります。

どのようにしてReactでこれを達成できますか？

Answer 1

おそらく、残念ながら、これは動作して何も変更しませんでしたsetTimeout

next: function() { 
    setTimeout(() => { 
     // increment the textIndex by one 
     this.setState({ textIndex: this.state.textIndex + 1}); 
    }, 2000); 
    },