Cách chính xác để sử dụng CSSTransitionGroup và Redux Connect

Question

Tôi đang cố gắng thêm một số kiểu hoạt hình cho một thành phần và cố gắng tìm ra nơi điều này đang xảy ra sai. Đây là một thành phần đơn giản với connect() và CSSTransitionGroup (một thành phần khác ở đâu đó trong DOM sẽ được sử dụng để kích hoạt thành phần lightbox của tôi, Redux sẽ được sử dụng để chia sẻ trạng thái giữa chúng, trong trường hợp bạn đang tự hỏi tại sao nó lại là một yêu cầu) :

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

Dưới đây là đoạn code mà gọi là thành phần trên:

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

Tuy nhiên tôi nhận được lỗi sau đây trong giao diện điều khiển của tôi:

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 

Nếu tôi loại bỏ các khối từ khắp nơi gọi renderPage của tôi, đầu ra của renderPage làm cho không có lỗi. Nó chỉ thêm khối chuyển tiếp trong đó gây ra lỗi. Theo như tôi có thể nói nhập khẩu {CSSTransitionGroup} là chính xác, đó là cách họ làm điều đó trong documentatio n (mặc dù tôi đã thử nó mà không có dấu ngoặc nhọn và vẫn không có may mắn).

Tôi có làm gì sai không? Tôi đã dành thời gian thử những thứ khác nhau và Googling, nhưng tất cả đều không có niềm vui cho đến nay.

Answer 1

Bạn đang sử dụng phiên bản 2+ của nhóm chuyển đổi phản ứng? Không có CSSTransitionGroup sau phiên bản 2. Hãy thử hoàn nguyên bằng cách thực hiện npm install --save react-transition-group@1.2.0 nếu bạn muốn mã của bạn hoạt động theo đúng cách.

Nếu bạn muốn sử dụng phiên bản mới, hãy thử sử dụng API mới hơn được tìm thấy trong These Docs.