使用函数输出组件时，React 过渡组不起作用

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>
    );
  }
}

它开始工作了。

使用函数输出组件时，React 过渡组不起作用

React transition group is not working when using a function to out components

reactjs

reactcsstransitiongroup