ReactCSSTransitionGroup или {CSSTransition, TransitionGroup} - PullRequest
0 голосов
/ 31 мая 2018

Я немного растерялся из-за ReactCSSTransitionGroup.Прочитайте документы

В используемых примерах: ReactCSSTransitionGroup и один CSSTransition вlist example {CSSTransition, TransitionGroup}

Таким образом, они все делают одно и то же (анимация), но ReactCSSTransitionGroup выглядит следующим образом

все из примеров документов

 render() {
  return (
    <ReactCSSTransitionGroup
      transitionName="example"
      transitionAppear={true}
      transitionAppearTimeout={500}
      transitionEnter={false}
      transitionLeave={false}>
      <h1>Fading at Initial Mount</h1>
    </ReactCSSTransitionGroup>
  );
}

одиночный CSSTransition

<CSSTransition
   in={showValidationMessage}
   timeout={300}
   classNames="message"
   unmountOnExit
   onExited={() => {
     this.setState({
     showValidationButton: true,});}}
  >
          *some code*        
</CSSTransition>

{CSSTransition, TransitionGroup} - вот так

<TransitionGroup className="todo-list">
   {items.map(({ id, text }) => (
      <CSSTransition key={id}  timeout={500} classNames="fade">
         <ListGroupItem>
           *Some code*
         </ListGroupItem>
     </CSSTransition>
  ))}
</TransitionGroup>

Итак, когда я должен / лучше использовать ReactCSSTransitionGroup, одиночный CSSTransition или {CSSTransition, TransitionGroup}?

...