错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义。反应

时间:2021-03-31 18:59:41

标签: javascript reactjs react-native expo

错误:

"元素类型无效:需要字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义。您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。

检查 App 的渲染方法。"​​

index.js

import { registerRootComponent } from 'expo';

import App from './App';

// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in the Expo client or in a native build,
// the environment is set up appropriately
registerRootComponent(App);

App.js

import React, { Component } from 'react';
import { NavigationCointainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Favoritos from './Favoritos';
import InfoGeneral from './InfoGeneral';
import Principal from './Principal';

const Stack = createStackNavigator();

export default class App extends Component {
  render(){
    return(
      <NavigationCointainer>
        <Stack.Navigator initialRouteName='Principal'>
          <Stack.Screen name='Principal' component={Principal}/>
          <Stack.Screen name='InfoGeneral' component={InfoGeneral}/>
          <Stack.Screen name='Favoritos' component={Favoritos}/>
        </Stack.Navigator>
      </NavigationCointainer>
    );
  };
}

1 个答案:

答案 0 :(得分:0)

这是一个非常常见的错误,它意味着您正在尝试将 undefined 呈现为一个组件。这通常发生在这样的情况下:

MyComponent.js:

function MyComponent() {
   return <View />;
}

App.js

import { MyComponent } from './MyComponent';

export default function App() {
  return <MyComponent />;
}

你能发现遗漏了什么吗?来自 exportMyComponent.js。在 App.js 中,MyComponent 未定义,因为没有这样的导出。要修复它,您可以这样做:

MyComponent.js:

export function MyComponent() {
   return <View />;
}