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>
      )
    }
}

重新渲染组件React

1 个答案: