Компонент для TransitionGroup - PullRequest
Новая
       32

Компонент для TransitionGroup

0 голосов
/ 29 января 2020

Я пытаюсь создать повторно используемый компонент для <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;

1 Ответ

0 голосов
/ 30 января 2020

Я, вероятно, не понимаю ваш вопрос на 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;

Похоже на изящную идею, поскольку существует множество контекстов, в которых можно добавить или удалить дочерних элементов из списка или аналогичных. Я мог бы начать использовать это уже.

...