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;

似乎是一個不錯的主意，因為在許多情況下，人們想要從列表或類似的列表中添加或刪除子項。 我可能已經開始使用它了。