重複調用使用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

回答

相關問題