我正在尝试为组件添加一些动画样式,并努力找出出错的地方.这是一个带有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中的表现方式(虽然我确实尝试过没有花括号但仍然没有运气).
难道我做错了什么?我花了一些时间尝试不同的东西和谷歌搜索,但到目前为止一切都没有喜悦.
您使用的是react-transition-group的第2版吗?在版本2之后没有CSSTransitionGroup.如果您希望代码按照原样运行,请尝试通过执行npm install –save react-transition-group@1.2.0进行恢复.
如果您想使用新版本,请尝试使用These Docs中的新API.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。