错误：忘记导出您的 Listview 项目组件答案

【问题标题】：Error : Forgot to export your Listview item component错误：忘记导出您的 Listview 项目组件
【发布时间】：2017-08-31 06:57:39
【问题描述】：

这是我遇到的错误。

警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘记导出您的组件从它定义的文件中。检查您的代码 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);

【问题讨论】：

你能展示你如何在列表组件中导入项目
这可能是因为您在连接时导出了默认值。
@Eden 添加了包含导入的类。你能帮帮我吗？我是 React Native 的初学者。
好吧，export default connect(.....)(BookingCard)，在 BookingPage 中，import BookingCard from ...
@Eden 现在可以工作了。你节省了我的时间，非常感谢。

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

【解决方案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了解更多信息。

【讨论】：