重复调用使用React.js

我使用的包装反应，打字员过滤通过并键入一些文本的组件看起来像这样进行反应，打字员：重复调用使用React.js

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>

表明它是（至少一次）。

我该如何解决这个问题？

来源

2016-03-03 user1072337

是这样的想法：数组中的文本在同一行上被输出，取代在OR之前键入的任何内容，或者是否希望将数组中的每个项目逐个输出到新行上？ – deowk

我看到了文档和示例......看起来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>

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

来源

2016-03-12 04:21:53

这是Typist组件的预期行为。

如果您希望它每次遍历数组并且呈现新的一组字符串，您可以将属性key={this.state.textIndex}添加到<Typist/>（这会呈现一个新组件替换每个迭代的旧组件）。

来源

2016-03-12 06:27:47 nikhil

重复调用使用React.js

回答

相关问题