React.js輪轉效果

編輯：我實現了一個包，使它看起來像文本正在被在頁面上鍵入https://ubereats.com/sf/React.js輪轉效果

：我打算看到尤伯杯餐館頁面上的效果。它看起來像這樣：

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> 

    ); 
    } 

});

我有一個JSON數組對象，我喂成這樣：

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'}, 
];

我想什麼做的，是有它，這樣，當一行文字是「鍵入「，它會在那裏停留片刻，然後消失，爲陣列中的下一個對象騰出空間等等......在一個循環中。

我如何用React實現這一點？

來源

2016-07-23 user1072337

你或許可以換用this.setStatesetTimeout

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

來源

2016-07-25 15:55:02 alunyov

不幸的是這並沒有改變與行爲什麼。 – user1072337

嗯......很奇怪。你也可以試試這個東西https://github.com/jstejada/react-typist#delaygenerator'函數（mean，std，{line，lineIdx，charIdx，defDelayGenerator}）{ //將動畫延遲2秒第一行的最後一個字符 if（lineIdx === 0 && charIdx === line.length - 1）{ return 2000; } return defDelayGenerator（）; }' – alunyov

React.js輪轉效果

回答

相關問題