reactjs - 使用函数输出组件时反应过渡组不起作用

Question

我使用一个函数来根据我的应用程序的状态输出必要的组件。我尝试使用ReactCSSTransitionGroup向过渡添加动画。但它不会起作用。在我的主渲染中，我这样做：

<ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}>
  {this.signupForm()}
</ReactCSSTransitionGroup>

然后在 signupForm 函数内部：

signupForm() {
  const {signupType} = this.state;

  if (signupType === 'employer') {
    return (
      <SignupFormEmployerInfo />
    );
  } else {
    return (
      <div>
        <SignupFormEmployeeInfo />
        <SignupFormEmployeeSocialLinks />
      </div>
    );
  }
}

我的CSS：

知道如何进行这项工作吗？

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

Answer 1

刚刚找到答案！React 转换组通过查看key组件来检测变化。在我的示例中，我没有使用key. 所以当我这样改变它时：

signupForm() {
  const {signupType} = this.state;

  if (signupType === 'employer') {
    return (
      <div key="1">
        <SignupFormEmployerInfo />
      </div>
    );
  } else {
    return (
      <div key="2">
        <SignupFormEmployeeInfo />
        <SignupFormEmployeeSocialLinks />
      </div>
    );
  }
}

它开始工作。