javascript - Reactjs 在不使用插件的情况下为离开组件设置动画

Question

在react.js中，我知道可以使用插件ReactCSSTransitionGroup来执行动画。作为学习过程的一部分，我正在尝试编写“vanilla js”来为进入和离开时的组件设置动画。

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

class Child extends React.Component {
  constructor(props) {
    super(props)
    this.state = { opacity: 0 }
  }
  componentDidMount() {
    this.setState({ opacity: 1 }) // change the opacity when the component is mounted
  }
  render() {
    <div style={{ transition: 'opacity 0.3s', opacity: this.state.opacity }}>
      I am a child component
    </div>
  }
}

class Parent extends React.Component {
  render() {
    return this.props.someProp === true ? <Child /> : null
  }
}

但是，我正在努力研究如何在离开时为组件设置动画。 componentWillUnmount 不适用于 this.setState({ opacity: 0 })，因为组件将被删除。我尝试阅读 ReactCSSTransitionGroup 中的源代码，但似乎没有明白要点。谁能提供一个简单的示例代码来解释如何实现离开组件？

Answer 1

问题是，您无法真正从组件本身内部处理这个问题。这就是为什么您只能在 ReactCSSTransitionGroup 组件的子组件上使用 React 转换。这是使用 ReactTransitionGroup 元素添加的新生命周期方法来处理的，如 docs. 中所述。

重要的方法是 componentWillLeave(callback) ，它不会从 DOM 中删除元素，直到调用回调。因此，如果您想自己实现类似的行为，则需要采用类似的方法并创建一些包装组件来处理其子生命周期并可能扩展它。