Question

我正在构建一个React JS应用程序。所以，我想从数组中反复打印一些东西，但它只有两个元素。我正在使用名为＆＃39;打字员＆＃39;这使我能够提供一个打字＆＃39;无论我输入什么类型的动画。

我基本上打算输入＆＃39;嗨＆＃39;，删除它然后键入＆＃39; Ola＆＃39;然后将其删除，然后以＆＃39;嗨＆＃39;开始再次并继续重复这种模式。

这就是我现在所拥有的：

let greetings=["Hi","Ola"];

render() {

    return(
        <div className={"TypistExample-header"} >
            <Typist className={"TypistExample"}>

                <Typist.Delay ms={1000} />
                {
                    greetings.map(i =>{
                        return <li><h1>{i}</h1>
                            {<Typist.Backspace count={12} delay={1000} />}
                        </li>
                    })

                }

            </Typist>

P.S我确实找到了一种方法，通过这样做几次，仍然不是无限的：

let greetings=["Hi","Ola"];

var actualTyping= greetings.map(i =>{
    return <li><h1>{i}</h1>
        {<Typist.Backspace count={12} delay={1000} />}
    </li>

});

var rows=[];

for(var i=0;i<10;i++){
    rows.push(actualTyping)
}

return(
        <div className={"TypistExample-header"} >
            <Typist className={"TypistExample"}>

                <Typist.Delay ms={1000} />

                {rows}

            </Typist>
       </div>
    );

Answer 1

您可以使用Typist的onTypingDone属性重新启动动画。将文本数组通过状态传递给Typist。键入完成后，清除状态，这将删除呈现的打字员，然后恢复原始文本，它将再次输入（sandbox）。

注意： setState是异步的，它会一起批量更新或将它们推迟到以后的时间。在这种情况下，我们要清除text（设置null），并且仅在更新视图后重新填充text。为此，我们可以使用setState的第二个参数，这是仅在应用更新（null）后才会触发的回调。

const greetings = ["Hi", "Ola"];

class ContType extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      text: props.text
    };
  }

  onTypingDone = () => {
    this.setState(
      {
        text: null
      },
      () =>
        // run this callback after the state updates
        this.setState({
          text: this.props.text
        })
    );
  };

  render() {
    const { text } = this.state;

    return (
      text && (
        <Typist onTypingDone={this.onTypingDone}>
          <Typist.Delay ms={1000} />
          {text.map((i, index) => {
            return (
              <div key={index}>
                <h1>{i}</h1>
                {<Typist.Backspace count={12} delay={1000} />}
              </div>
            );
          })}
        </Typist>
      )
    );
  }
}

render(<ContType text={greetings} />, document.getElementById("root"));

Answer 2

更好和简单的解决方案是创建一个您选择的常量整数数组，然后使用为整数指定的值执行映射。

const a = [1...10000]
let greetings = ["hi", "hello"]
  render(){
    return(
      a.map( i => {
        <h1>greeting[0] - greeting[1]</h1>
      })
    )
}

始终，请记住，无限循环会导致反应引擎崩溃。好的做法是为这种情况指定一个整数值进行映射。

如何使用map函数无限地迭代数组？

2 个答案: