javascript - 重新渲染组件 React

Question

React 新手，我正在尝试使用 react-typing-animation 获得打字动画和退格动画。图书馆。

我有一个单词列表，我希望这个打字动画在每个单词出现 3 秒时循环播放。此代码用于替换每个单词:

const items = ['mattress','loft kit', 'skis', 'boxes', 'clothes', 'furniture'];
var count = 0;

export class Header extends React.Component {
    componentDidMount() {     
      setInterval(this.timer, 3000);
    }

    constructor(props) {
      super(props)
      this.state = {      
        currentItem: items[count]
      }

      this.timer = this.timer.bind(this)
    }

    timer() {
      count += 1;
      if(count < items.length) {
        this.setState({
            currentItem: items[count]
        })
      }
    }

    render() {
      return(
       {this.state.currentItem}
      )
    }
}

使用 <Typing>我生成此代码的库中的组件:

<Typing> 
 <Typing.Delay ms={1000}/> 
 {this.state.currentItem} 
 <Typing.Backspace count = {20} delay={2000}/> 
</Typing>

此代码适用于我想要的动画，但仅适用于元素列表中的第一项。这个组件需要重新渲染吗？如果是这样，我如何将其包含在我的 componentDidMount 中？方法？感谢您的帮助!

Answer 1

我已经修改了您的代码以展示如何在 componentDidMount()

中包含计时器

const items =['mattress','loft kit', 'skis', 'boxes', 'clothes', 'furniture']

export class Header extends React.Component {
    componentDidMount() {
      let count = this.state.count 
      const intvl = setInterval( () => {
        if (count < items.length) {
          this.setState({currentItem: items[count]})
          this.setState({count: count += 1})
        }
      }, 3000)
      this.setState({interval: intvl})
    }

    componentWillUnmount() {
      clearInterval(this.state.interval)
    }

    constructor(props) {
      super(props)
      this.state = {
        currentItem: items.length,
        interval
      }
    }

    render() {
      return( <div>
       {this.state.currentItem}
       </div>
      )
    }
}