Повторные вызовы реагировать-машинистка с использованием React.js

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> 

Я думаю, что должно решить проблему. Дайте мне знать, если это сработает.

Answer 2

Ожидаемое поведение компонента Typist.

Если вы хотите, чтобы он выполнял итерацию по массиву и визуализировал новый набор строк каждый раз, вы можете добавить атрибут key={this.state.textIndex} в <Typist/> (Это отображает новый компонент, заменяющий старый для каждой итерации).