如何使用反应低级API的动画生命周期钩子

Question

我需要在React中处理一些动画，因为我正在使用React的低级API，即React Transition Group。我想使用它，因为它为我提供了生命周期钩子，如componentWillEnter(callback)，componentWillLeave(callback)。但我对如何使用这些生命周期钩子的问题感到震惊。这是我的代码。我有一个类App，我在其中使用了React Transition Group，其中我的子组件被添加到其中：

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

但生命周期钩子函数componentWillEnter和componentWillLeave未被调用。请让我知道我错过了什么。