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轮转效果

回答

相关问题