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% 理解你的问题（它可能包含更多细节），但也许你正在寻找这样的东西，即，分别对每个孩子使用淡入淡出效果，而不仅仅是作为一个整体？

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;

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