Animation 如何使用react低级API为动画使用生命周期挂钩

我需要在React中处理一些动画，因为我正在使用React的低级API，即React Transition Group。我想使用它，因为它为我提供了生命周期挂钩，比如

componentWillEnter（callback）

，

componentWillLeave（callback）

。但我被如何使用这些生命周期挂钩的问题所打动。这是我的密码。我有一个类应用程序，在其中我使用了React过渡组，其中我的子组件添加到该组中：

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

导出默认类应用程序扩展组件{
组件将离开（回调）{
log（'组件正在离开'）；
}
componentWillEnter（回调）{
console.log（'组件正在进入'）
}
render（）{
const styles=require（'./App.scss'）；
返回(
{this.props.children}
);
}
}

---

但是没有调用生命周期钩子函数

componentWillEnter

和

componentWillLeave

。请让我知道我遗漏了什么。

我认为应该将这些生命周期挂钩添加到

ReactTransitionGroup

的直接子级。不是外部组件。@Dan Abramov感谢您做出更改，并会让您知道。我认为这些生命周期挂钩应该添加到

ReactTransitionGroup

的直接子级。不是外部组件。@Dan Abramov感谢您做出更改，并会让您知道。