Question

我有一个有componentA的页面，在componentDidMount循环方法我正在更新状态，触发一些动画但是如果我刷新页面动画不播放。请告诉我如何解决此问题。下面是我的组件代码

import React from 'react';
import { findDOMNode } from 'react-dom';
import Nav from "../nav/nav-component";
class Mylist extends React.Component{
  constructor(props) {
    super(props);
    this.handleScroll = this.handleScroll.bind(this);
    this.state = { animationClass: '' , transform : 12  };
  }
  componentDidMount() {
      window.addEventListener('scroll', this.handleScroll);
      this.setState({animationClass:'animate'});
  };
  componentDidUpdate() {
      //this.setState({animationClass:''});
  };

  componentWillUnmount() {
      window.removeEventListener('scroll', this.handleScroll);
      this.setState({animationClass:''});
  };
  handleScroll(event){
    const scrollTop = event.srcElement.body.scrollTop,
          ele = findDOMNode(this.refs.toggle), // how to get dom element in react
          childElements = ele.children,
          componentTopPos = ele.getBoundingClientRect();
    //itemTranslate = Math.min(0, scrollTop/3 - 60);

    console.log("scrollTop",scrollTop);
    console.log(childElements);
    console.log("componentTopPos",componentTopPos);

     console.log(this);
    this.setState({
      transform: "dsfdf"
    });
  }
  render(){
    return ( 
      <div className={'header '+this.state.animationClass}>
      <Nav />
      </div> 
    );
  }
}
export default Mylist;

Answer 1

请记住，componentDidMount仅被调用一次。您刷新页面多少次都没有关系。该方法将不会再次调用。我认为播放动画的更好方法是在本地状态下设置一个标志，例如“ playAnimation：true”，在播放动画后将状态设置为false。刷新后，您的状态将再次变为真，动画将再次播放。希望我能帮上忙。

在页面刷新哪个生命周期方法调用反应？

1 个答案: