Question

我正在完成一个教程，并在iOS模拟器上遇到以下错误。

Element type is invalid: expected a string (for built-in components) 
but got: undefined. You likely forgot to export your component from 
the file it’s defined in.

对于我的生活，我无法弄清楚发生了什么。我已尝试导入{LoginForm}和LoginForm，但都无法正常工作。如果我在App.js中注释{/*<LoginForm />*/}，它可以正常工作。

index.ios.js

import { AppRegistry } from 'react-native';
import App from './src/App';

AppRegistry.registerComponent('accessss', () => App);

App.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import LoginForm, { Header } from './components';
import firebase from 'firebase';
const config = require('./../config/firebase.config.js');

class App extends Component {

    componentWillMount() {
        firebase.initializeApp(config);
    }

    render() {
        return(
            <View>
                <Header headerText="Authentication" />
                <LoginForm />
            </View>
        );
    }
}

const styles = {


};

export default App;

LoginForm.js

import React, { Component } from 'react';
import { View } from 'react-native';
import { Button, Card, CardSection } from './';

class LoginForm extends Component {
    render() {
        return(
            <View>

            </View>
        );
    }
}

export default LoginForm;

{/* Also tried export { LoginForm }; */}

我不明白我做错了什么。我导出了4个其他组件并且工作正常。

Answer 1

能否请您将index.js文件发布到components文件夹中？如果目录中没有index.js文件，则默认导入将不适用于目录。您可以这样做：

/components/index.js:

import LoginForm from './LoginForm.js'
import {Header} from './Header.js'

export Header
export default LoginForm

或在您的App.js中，执行以下操作：

import LoginForm from './components/LoginForm'
import {Header} from './components/Header'
/* ... */

元素类型无效：期望的字符串或类但未定义

1 个答案: