Question

编辑：我想要的效果可以在Uber Eats页面上看到：https://ubereats.com/sf/

我已经实现了一个包，使其看起来像是在页面上输入文本。它看起来像这样：

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

我想做的是，当一行文字输入＆＃34;时，它会在那里停留片刻，然后消失，为下一个物体留出空间。数组等......在一个循环中。

如何使用React实现这一目标？

Answer 1

你可以用this.setState

包裹setTimeout

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

React.js轮播效果

1 个答案: