Question

在react.js中，我知道可以使用插件ReactCSSTransitionGroup执行动画。作为学习过程的一部分，我正在尝试编写“香草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中删除元素，直到调用。因此，如果您想自己实现类似的行为，则需要采用类似的方法并创建一些可以处理其子生命周期并可能扩展它的包装组件。

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

1 个答案: