Question

我遇到了一个非常奇怪的错误。我觉得我已经以正常和传统的方式导出了Home组件。下面，我发布了我认为相关的.js个文件，以便纠正此错误。尽管如此，在我的iOS模拟器中，我仍然收到一条错误消息：

Element 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 'Home'.

这是Home.js：

import React from 'react';
import Container from 'native-base';
import MapContainer from "../../../components/MapContainer/index";

class Home extends React.Component {

    componentDidMount() {
        this.props.setName();
    }

    render() {
        const region = {
            latitude: 3.146642,
            longitude: 101.695845,
            latitudeDelta: 0.8922,
            longitudeDelta: 0.0421
        }
        return(
            <Container>
                <MapContainer region={region}/>
            </Container>
        );
    }
}

export default Home;

这是index.js：

import React from 'react';
import View from 'native-base';
import styles from './MapContainerStyles';
import * as MapView from "react-native-maps/lib/components/ProviderConstants";

const MapContainer = ({region}) => {
    return(
        <View style={styles.container}>
            <MapView
                provider={MapView.PROVIDER_GOOGLE}
                style={styles.map}
                region={region}
            >
            </MapView>
        </View>
    );
}

export default MapContainer;

Answer 1

问题不在于Home的导出。我们知道，因为正在调用Home的{{1}}。

从错误中看，似乎没有正确导入render或Container。我怀疑MapContainer是一个命名导出，因此您需要使用命名导入：

Container

更新：是的，这是NativeBase documentation的一个例子：

import { Container } from 'native-base';

组件将无法识别它正在导出

1 个答案: