错误:忘记导出Listview项目组件

时间:2017-08-31 06:57:39

标签: javascript react-native react-native-android react-native-ios react-native-listview

这是我得到的错误。

  

警告: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);

1 个答案:

答案 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找到更多信息。