Reactjs 使用react.js重复调用react打字员

我正在使用package react打字员筛选并键入一些文本组件如下所示：

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

];

Typing=React.createClass({
getInitialState:函数（）{
返回{textIndex:0}；
},
下一步：函数（）{
//将textIndex增加1
this.setState（{textIndex:this.state.textIndex+1}）；
//this.setState（{visible:false}）；
},
render:function（）{
常量文件='#一'；
返回(
{this.state.textIndex}

{typedtext[this.state.textIndex].text}

);
}
});
var typedtext=[
{id:'name'，text:'Some name'}，
{id:'growth'，text:'Some growth'}，
{id:'development'，text:'Some Dev'}，
{id:'anatyics'，text:'Some Lytics'}，
];

我希望遍历数组，在旧文本结束时键入新行文本。但是，正如现在一样，这会在第一行文本之后停止。但是，我知道它是迭代的，因为这些行：

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

{this.state.textIndex}

{typedtext[this.state.textIndex].text}

表明它是（至少一次）

---

如何解决此问题？

我看到了文档和示例…似乎在键入所有数据时调用了

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>

{
typedtext.map（功能（项）{
})
}

---

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

这是

打字员组件的预期行为

如果希望它在数组中迭代并每次呈现新的字符串集，可以将属性
key={this.state.textIndex}
添加到
（这会在每次迭代中呈现一个新组件替换旧组件）。
是指数组中的文本在同一行上被键入，替换之前键入的内容，还是希望数组中的每个项逐个键入到新行？