Reactjs 如何使用react transition group设置退出动画

我正在使用react transition group创建一个弹出到视图中的模式

const AnimatedModal: SFC<AnimatedModalProps> = (props: AnimatedModalProps) => (
<CSSTransition in={props.showWindow} unmountOnExit key={1} classNames={'modal-fade'} timeout={300}>
    <BaseModal onCloseHandler={props.onCloseHandler} showWindow={props.showWindow}>
        <CSSTransition
            in={props.showWindow}
            key={2}
            unmountOnExit
            classNames={props.animationClassNames}
            timeout={300}
        >
            <ModalPanel onCloseHandler={props.onCloseHandler}>{props.children}</ModalPanel>
        </CSSTransition>
    </BaseModal>
</CSSTransition>

const AnimatedModal:SFC=（道具：AnimatedModalProps）=>(
{props.children}

))

然而，我很困惑如何让这个动画退出。因为我一使用道具，showWindow=false。它会破坏整个组件，而不给它设置动画的时间

通过将其嵌套在TransitionGroup中，是否有一些方法可以做到这一点

查看

组件的道具。我没有用嵌套的

组件尝试过它，但它通常可以这样使用：

 <TransitionGroup
     childFactory={child => React.cloneElement(child)}
  >
    <CSSTransition 
      in={props.showWindow} 
      timeout={400} 
      classNames={classes.exitTransition}
    >
      <ChildComponent/>
    </CSSTransition>
  </TransitionGroup>

React.cloneElement（子项）}
>