How to use life cycle hooks for animation using re

问题:

I need to work around a bit of animation in React for that I am using the low level API of React i.e. React Transition Group. I want to use this because it provides me the life cycle hooks like componentWillEnter(callback), componentWillLeave(callback). But I am struck in the problem how to use those lifecycle hooks. Here is my code. I have a class App, where I have used the React Transition Group in which my child components are added inside this:

export default class App extends Component {
  componentWillLeave(callback) {
    console.log('Component is leaving');
  }
  componentWillEnter(callback) {
    console.log('component is entering')
  }
  render() {
    const styles = require('./App.scss');
    return (
      <div className={styles.app}>
          <ReactTransitionGroup transitionName="example">
            <div key={this.props.location.pathname}>
              {this.props.children}
            </div>
          </ReactTransitionGroup>
      </div>
    );
  }
}

But the lifecycle hook functions componentWillEnter and componentWillLeave are not getting called. Please let me know what I am missing.