这是我得到的错误。
警告:React.createElement:type无效 - 需要一个字符串 (对于内置组件)或类/函数(对于复合 组件)但得到:未定义。你可能忘了导出你的 来自其定义的文件中的组件。检查您的代码 BookingPage.js:19
我有一个Listview和项目组件正确导入。当我从
更改Listview项目的导出时export default connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);
到
export {BookingCard};
它正在工作。但我想将Redux用于Listview项目组件。如何正确导出类。这是我的BookingCard(Listview项目组件)
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import { connect } from 'react-redux';
import {Icon, Button} from 'native-base';
import {callCancel, setBookingstatus} from '../actions';
class BookingCard extends React.Component {
render() {
return (
<View style={styles.container}>
.....
......
</View>
);
}
}
export default connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);
// export {BookingCard};
BookingPage(组件包括Listview)
import React from 'react';
import {ListView, View} from 'react-native';
import { connect } from 'react-redux';
import {Spinner} from './common';
import {BookingCard} from './BookingCard';
import {fetchBooking} from '../actions';
class BookingPage extends React.Component {
componentWillMount() {
this.props.fetchBooking();
}
ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
renderRow(booking) {
return <BookingCard booking={booking} />;
}
renderButton() {
if (this.props.loading) {
return <Spinner size="large" />;
}
return (
<ListView
dataSource={this.ds.cloneWithRows(this.props.bookings)}
enableEmptySections
renderRow={this.renderRow}
/>
);
}
render() {
console.log('onRender BookingPage');
return (
<View>
{this.renderButton()}
</View>
);
}
}
const mapStateToProps = ({ booking }) => {
const { bookings, loading } = booking;
return { bookings, loading };
};
export default connect(mapStateToProps, {fetchBooking})(BookingPage);
答案 0 :(得分:1)
由于您要导出组件默认,因为这样:
export default connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);
以下行失败,因为它需要命名导出。
import {BookingCard} from './BookingCard';
您应该像这样修复导入:
import BookingCard from './BookingCard';
或将其导出为
export const MyConnectedComponent = connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);
您可以在MDN's website找到更多信息。