使用React.js重复调用react-typist

Question

我正在使用包反应打字员来过滤并输入一些文本组件如下所示:

Typing = React.createClass({

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

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

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

<div>
      <div className="TypistExample">


        <Typist className="TypistExample-header" avgTypingSpeed={15000} startDelay={1000}
          onTypingDone={this.next} cursor={{show: false}}>
            <h1><a href={docs}>{typedtext[this.state.textIndex].text}</a></h1>
        </Typist>

        <p>{this.state.textIndex}</p>
        <p>{typedtext[this.state.textIndex].text}</p>

      </div>
</div>

    );
  }

});


var typedtext = [

{id: 'name', text: 'Some Name'},
{id: 'growth', text: 'Some Growth'},
{id: 'development', text: 'Some Dev'},
{id: 'analtyics', text: 'Some Lytics'},

];

我希望迭代数组,在旧文本完成时输入新的文本行.但是,就像现在一样,这在第一行文本之后停止.我知道它正在迭代,因为这些行:

<p>{this.state.textIndex}</p>
<p>{typedtext[this.state.textIndex].text}</p> 

表明它(至少是一次).

我怎样才能解决这个问题？

Answer 1

我看到了文档和示例...似乎onTypingDone在键入所有数据时就会调用..我认为您希望每次都调用它...就像某种循环，但不会发生。取而代之的是，在该值增加之后，它将仅显示第一个元素，但不会被键入。

另外，您还需要输入要输入的数据。

所以试试这个...

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

我想应该可以解决问题。让我知道它是否有效。