reactjs – 使用CSSTransitionGroup和Redux Connect的正确方法

我正在尝试为组件添加一些动画样式,并努力找出出错的地方.这是一个带有connect()和CSSTransitionGroup的简单组件(DOM中其他地方的不同组件最终将用于触发打开我的灯箱组件,Redux将用于在它们之间共享状态,以防您想知道为什么这是一个要求) ：

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);

这是调用上面组件的代码：

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')
);

但是我在控制台中收到以下错误：

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

如果我从我的renderPage调用周围删除块,则renderPage的输出呈现没有错误.它只会添加转换块导致错误.据我所知,import {CSSTransitionGroup}是正确的,它就是他们在documentation中的表现方式(虽然我确实尝试过没有花括号但仍然没有运气).

难道我做错了什么？我花了一些时间尝试不同的东西和谷歌搜索,但到目前为止一切都没有喜悦.