React TransitionLeave in if/else return

Question

我正在构建一个React组件，它根据prop返回两个组件中的一个。

if (!this.prop.myProp) {
  return (<Compontent1 />)
} else {
  return (<Compontent2 />)
}

当prop发生变化时，我希望被移除的元素转移出去，而出现的元素应该转移进来。

新元素上的transitionEnter运行良好。这是通过将组件封装在ReactCSSTransitionGroup中并添加具有转换规则的适当类来实现的。

元素离开时的转换不起作用。它立即消失，进入元素上的transitionEnter开始。这是我的完整代码：

if (!user) {
    header = (
      <ReactCSSTransitionGroup key="login"
                               component="div"
                               className="app-header--login"
                               transitionName="login"
                               transitionEnter={false}
                               transitionEnterTimeout={0}
                               transitionLeave={true}
                               transitionLeaveTimeout={600}>
        <button className="button button--login"
                onClick={this._handleLogin.bind(this)}>
          Join
        </button>
      </ReactCSSTransitionGroup>
    )
  } else {
    header = (
      <ReactCSSTransitionGroup key="form"
                               component="div"
                               className="app-header--form"
                               transitionName="form"
                               transitionEnterTimeout={0}
                               transitionLeaveTimeout={0}
                               transitionAppear={true}
                               transitionAppearTimeout={600}>
        <Form user={user} />
      </ReactCSSTransitionGroup>
    )
}
return ({header});

转换类目前有意地很简单，以确保转换有效。

.login-leave {
  position: absolute;
  opacity: 0;
  transition: opacity 0.6s ease-in;
}
.login-leave.login-leave-active {
  opacity: 1;
  transition: opacity 0.6s ease-in;
}

我是否错误地执行了transitionLeave？

Answer 1

"我是否错误地实现了transitionLeave？"我不这么认为。

但是您放错了key属性的位置。

它应该在子级中，而不是在ReactCSSTransitionGroup中。这就是为什么transitionLeave不起作用的原因，React不知道哪些孩子已经进入或离开。

  return (<div>
      <ReactCSSTransitionGroup 
                               component="div"
                               className="app-header--login"
                               transitionName="login"
                               transitionEnter={false}
                               transitionEnterTimeout={0}
                               transitionLeave={true}
                               transitionLeaveTimeout={600}>
        {!user ? <button key="login" className="button button--login"
                onClick={this._handleLogin.bind(this)}>
          Join
        </button> : null}
      </ReactCSSTransitionGroup>
      <ReactCSSTransitionGroup 
                               component="div"
                               className="app-header--form"
                               transitionName="form"
                               transitionEnterTimeout={0}
                               transitionLeaveTimeout={0}
                               transitionAppear={true}
                               transitionAppearTimeout={600}>
        {user ? <Form key="form" user={user} /> : null}
      </ReactCSSTransitionGroup>
    </div>)