Prawidłowy sposób korzystania z CSSTransitionGroup i Redux Connect

Question

Próbuję dodać styl animacji do składnika i walczy, aby dowiedzieć się, gdzie to idzie źle. Oto prosty komponent z connect() i CSSTransitionGroup (inny komponent gdzie indziej w DOM zostanie ostatecznie wykorzystany do uruchomienia mojego komponentu lightbox, Redux będzie używany do dzielenia stanu między nimi, na wypadek gdybyś zastanawiał się, dlaczego jest to wymagane) :

LightboxPresentation.js:

import React, { Component } from 'react'; 
import { CSSTransitionGroup } from 'react-transition-group'; 
import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 
import * as actionCreators from '../actions/actionCreators'; 

class LightboxPresentation extends Component { 
    render() { 
     return (
      <div> 
      <CSSTransitionGroup 
       transitionName="lightbox" 
       transitionEnterTimeout={500} 
       transitionLeaveTimeout={500}> 
       {this.renderPage()} 
       </CSSTransitionGroup> 
       </div> 
     ) 
    } 
    renderPage() { 
     return (
      <div key={'lightbox-module'}>Some test HTML</div> 
     ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     showLightbox: state.showLightbox, 
     itemsShowLightbox: state.itemsShowLightbox, 
    }; 
}; 
const mapDispatchToProps = (dispatch) => { 
    return bindActionCreators(actionCreators, dispatch); 
}; 
export default connect(mapStateToProps, mapDispatchToProps)(LightboxPresentation); 

Oto kod, który wywołuje powyższy składnik:

App.js:

import React from 'react'; 
import { render } from 'react-dom'; 
import { Provider } from 'react-redux'; 
import configureStore from './store/configureStore'; 

import ItemList from './components/ItemList'; 
import LightboxPresentation from './components/LightboxPresentation'; 

const initialState = { itemFilter: 'featured' } 

const store = configureStore(initialState); 

render(
    <Provider store={store}> 
     <LightboxPresentation /> 
    </Provider>, 
    document.getElementById('lightbox') 
); 

Jednak pojawia się następujący błąd w mojej konsoli:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `LightboxPresentation`. 
    in LightboxPresentation 
    in Connect(LightboxPresentation) 
    in Provider 

Jeśli usunąć blok z całego moje wezwanie renderPage, wyjście renderPage renderuje bez błędów. Dodanie tylko bloku przejść powoduje błąd. O ile mogę powiedzieć, że import {CSSTransitionGroup} jest poprawny, to jak to robią w documentatio n (chociaż próbowałem go bez nawiasów klamrowych i wciąż nie miałem szczęścia).

Czy robię coś nie tak? Spędziłem trochę czasu próbując różnych rzeczy i Googling, ale wszystko bez radości do tej pory.

Answer 1

Czy używasz wersji 2+ z grupy reakcji-przejściowej? Po wersji 2. nie ma CSSTransitionGroup. Spróbuj cofnąć, wykonując npm install --save react-transition-group@1.2.0, jeśli chcesz, aby twój kod działał tak, jak jest.

Jeśli chcesz użyć nowej wersji, spróbuj użyć nowszego interfejsu API znalezionego pod numerem These Docs.