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

【问题标题】：Element type is invalid: expected string or class but got undefined元素类型无效：预期的字符串或类但未定义
【发布时间】：2017-12-24 01:33:00
【问题描述】：

我正在学习教程，但在 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 个其他组件，它们工作正常。

【问题讨论】：

你试过export LoginForm;吗？（没有花括号）。另一个可能的解决方案是删除 export default LoginForm 并将类定义更改为 export default class LoginForm extends Component
已更改为 import { LoginForm } from './components/LoginForm.js'; 并与 export default LoginForm; 一起使用出于某种原因，它不喜欢不指定要导入的文件的想法。
很高兴你知道了！

标签： javascript react-native

【解决方案1】：

您能否将您的index.js 文件发布到您的组件文件夹中？如果目录中没有 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'
/* ... */

【讨论】：