元素类型无效：在 React Native 项目中需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）

Question

我正在构建一个反应本机项目，我收到以下错误：

错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查 的渲染方法SignInScreen。

这是我的代码。

import React from 'react';

import { View,Image,StyleSheet,useWindowDimensions } from 'react-native';

import Logo from'../../../assetss/images/logo.png';

import CustomInput from '../../components/CustomInput';

const SignInScreen =  () => {


     const {height} = useWindowDimensions();

    return (
        <View style= {styles.root}>
          <Image source={Logo} style ={[styles.logo, {height: height * 0.3}]}
           resizeMode="contain" /> 
          <CustomInput />
       </View>
 );
};

const styles = StyleSheet.create({
   root: {
        alignItems: 'center',
        padding: 20,
    },

   logo:{
    width: 1000,
    maxWidth: 1100,
    maxHeight: 200 ,
   }
})


export default SignInScreen 

Answer 1

named exports和之间是有区别的default exports。

命名导出

可用于模块的顶级值，例如

export const fetch = () => {

}

export const Component = () => {
    return <></>
}

以上可以使用导入

import { fetch, Component } from "./MyModule"

注意花括号。

默认导出

默认导出每个文件只能使用一次，例如

const Component = () => {
    return <></>
}

export default Component;

以上可以使用导入

import Component from "./MyModule"

请注意，我们在这里没有使用花括号。

错误信息

错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认导入和命名导入。

告诉我们我们在一些进口产品中混用了这一点。您的导入 和View, Image, StyleSheet是useWindowDimensions正确的。因此，要么CustomInput要么Logo没有正确导入（或导出；这取决于我们希望如何查看它）。

你假设default exports两者。检查它们是否使用 导出default export。

如果您不想使用默认导出，则需要将导入语句更改为以下内容。

import { CustomInput } from '../../components/CustomInput';

此外，检查导入路径（例如'../../../assetss/images/logo.png'和'../../components/CustomInput'）是否正确。

Answer 2

就我而言，问题是我创建了所有组件但没有保存文件。我不使用自动保存，因此我创建了所有组件，将它们导入到我的 Home 组件中，但它们没有保存，因此引发了错误。一旦我保存了每个文件，错误就消失了。

Answer 3

在反应中进行单元测试时面临

使用 jest 和 React-testing-library 编写单元测试用例时注意到同样的问题。

问题：这可能是由于使用 jest.mock 模拟组件的错误方式造成的

问题情况：

jest.mock('./components/notes-list', () => {
  return {
    NotesList: () => <div data-testid='note-list-component'>Hello World</div>,
  };
});

解决方案

jest.mock('./components/notes-list', () => {
  const NotesList = () => (
    <div data-testid='note-list-component'>Hello World</div>
  );

  return NotesList;
});