错误:忘了导出列表视图项组件
问题描述:
这是我得到的错误。错误:忘了导出列表视图项组件
警告:React.createElement:类型无效 - 预期字符串 (用于内置组件)或类/功能(复合 组件),但得到:不确定。你可能忘了你的 组件从它的定义的文件导出检查你的代码在 BookingPage.js:19。
我有一个ListView和项目组件正确导入。当我改变了ListView项的出口从
export default connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);
到
export {BookingCard};
它的工作。但我想为Listview项目组件使用redux。如何正确导出类。这是我的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(组件包括列表视图)
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);
答
既然要导出您的组件默认这样的:
export default connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);
的因为它需要一个名为export以下线路出现故障。
import {BookingCard} from './BookingCard';
您应该解决您的导入是这样的:
import BookingCard from './BookingCard';
或导出它像
export const MyConnectedComponent = connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);
您可以在更MDN's website找出来。
你能告诉你,当它连接你如何导入项列表组件 – eden
它可能是因为你出口的默认。 – eden
含进口也增加@Eden类。你能帮我吗?即时通讯本身就是非常初学者。 –