CSSTransitionGroup 和 Redux Connect 的正确使用方法

Question

我正在尝试向组件添加一些动画样式，但一直在努力找出哪里出了问题。这是一个带有 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 中的做法（尽管我确实在没有花括号的情况下尝试过但仍然没有运气）。

我做错了什么吗？我花了一些时间尝试不同的事情和谷歌搜索，但到目前为止都没有快乐。

Answer 1

您使用的是 react-transition-group 版本 2+ 吗？版本 2 之后没有 CSSTransitionGroup。如果您希望代码按原样工作，请尝试通过执行 npm install --save react-transition-group@1.2.0 来恢复。

如果您想使用新版本，请尝试使用 These Docs 中的更新 API。

CSSTransitionGroup 和 Redux Connect 的正确使用方法

Correct way to use CSSTransitionGroup and Redux Connect

reactjs

reactcsstransitiongroup

react-redux