TransitionGroup 的组件

Question

我正在尝试为 <TransitionGroup> 创建一个可重复使用的组件，但不确定 {children} 的放置位置。

import React from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';

const TransitionFade = ({ children }) => {

    return(
        <TransitionGroup>
            <CSSTransition in={true} appear={true} timeout={700} classNames="fade">
                {children}
            </CSSTransition>
        </TransitionGroup>
    );

}

export default TransitionFade;

Answer 1

我可能无法 100% 理解您的问题（它可能包括更多细节），但也许您正在寻找类似的东西，即分别对每个 child 使用淡入淡出效果，而不仅仅是作为一个整体？

import React from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';

const TransitionFade = ({ children }) => {
  return(
    <TransitionGroup>
      { React.Children.map(children, child => 
          (<CSSTransition in={true} appear={true} timeout={700} classNames="fade">
            {child}
          </CSSTransition>)
        )
      }
    </TransitionGroup>
  );

}

export default TransitionFade;

似乎是个不错的主意，因为在很多情况下，人们都想在列表或类似的列表中添加或删除 children。我可能已经开始使用它了。

TransitionGroup 的组件

Component for TransitionGroup

reactjs

reactcsstransitiongroup