Javascript Reactjs在不使用加载项的情况下设置离开组件的动画

在react.js中，我知道可以使用addon

reactcstransitiongroup

执行动画。 作为学习过程的一部分，我正在尝试编写“vanilla js”，以便在进入和离开时为组件制作动画

我已经想出了一些简单的代码，如下所示，当子组件安装在

类子级扩展React.Component{
建造师（道具）{
超级（道具）
this.state={opacity:0}
}
componentDidMount（）{
this.setState（{opacity:1}）//在安装组件时更改不透明度
}
render（）{
我是一个孩子
}
}
类父类扩展了React.Component{
render（）{
返回this.props.someProp==true？：null
}
}

---

然而，我正在努力研究如何在离开时设置组件的动画

componentWillUnmount

无法与

this.setState（{opacity:0}）

一起使用，因为该组件将被删除。我试着在

reactcstransitiongroup

中阅读源代码，但似乎没有领会要点。有人能提供一个简单的示例代码来解释如何实现离开时的组件吗？

问题是，您无法真正从组件本身处理这个问题。这就是为什么只能对

reactcstransitiongroup

组件的子级使用React转换的原因。这是使用

ReactTransitionGroup

元素添加的新生命周期方法来处理的，如中所述

有一个重要的方法

componentWillLeave（callback）

，它在调用callback之前不会从DOM中删除元素。所以，如果您想自己实现类似的行为，您需要采取类似的方法，并创建一些包装组件来处理其子生命周期，并可能扩展它