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/>（这会为每次迭代呈现一个新组件替换旧组件）。

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

2 个答案: