小编del*_*ear的帖子

正确使用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 …
Run Code Online (Sandbox Code Playgroud)

reactjs reactcsstransitiongroup react-redux

6
推荐指数
1
解决办法
1189
查看次数