reactjs - 如何处理不是TransitionGroup的直接后代的孩子的退出

Question

我正在尝试在出现和离开时为反应组件设置动画。只需使用 CSSTransition 就可以很容易地在出现时对其进行动画处理，但是我很难理解如何在不将其耦合到其父组件的情况下对其进行动画处理而离开 dom。

理想情况下，我想使用 TransitionGroup 作为某种 Provider。这意味着，将它放在任何上层组件的任何位置，让它处理在任何嵌套级别离开 dom 的任何子级。非常类似于 redux 存储提供程序或反应上下文所做的。

我多次阅读 react-transition-group 的文档，但如果不让 CSSTransition 成为 TransitiounGroup 的直接子代，我就找不到办法做到这一点。

这是我的理想场景：

const SomeComponent = () => (
    <div> 
      some stuff 
      <AnimatedComponent />
    </div>)

const AnimatedComponent = = () => (
   <CSSTransition> 
      some stuff 
    </CSSTransition>)

const MainComponent = () => (
    <TransitionGroupProvider> 
      <SomeComponent />
      <OtherStuff />
    </TransitionGroupProvider>)

这个想法是保持动画组件解耦并且仍然能够将它从 dom 中删除。如果这不可能，我可能会把它放在层次结构的更高位置（现在我可以），使它成为一个连接的组件并基于 redux 存储对其进行动画处理，这样我就可以从其他组件控制它而无需耦合它。

标签： reactjsreact-transition-group