解决React-Native项目由于export，import错误导致的元素类型无效【Element type is invalid】

左手的ㄟ右手 2022-04-23 09:12 197阅读 0赞

前些日子做项目时有一个报错，虽然解决了，但是对于导致的原因，还是一知半解。今天突然发现一篇博客，大受启发，决定将这个问题系统的总结一下。

## 报错信息： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]  
提示元素类型无效，可能是忘记从你定义的文件中导出来组件，或者是你弄混了要导入的组件的默认名字，没有和你导入时的名字相对应。

## 解决方式： ##

1：在导出文件中使用`export class 组件类名称 extends Component` 将组件导出。此时可以在要导入的地方使用 `import {组件类名称} from “路径”` 进行导入使用。  
2：在导出文件类中，使用`class 组件类名称 extends Component` 对组件类进行定义，并在定义之后使用 `export default 组件类名称`的方式将组件进行导出。此时可以在要导入的地方使用 `import 组件类名称 from “路径”` 方式将需要的组件类导入进来。

## 原因分析： ##

在初识`react-native`时就在想为什么每个文件最上面的导入外部组件的方式会有不同

import { View, Text } from "react-native"
    
    import TestCompontent from "../../TestCompontent"

为什么一个带大括号，另一个就不带大括号呢？？？  
**第一种方式：**  
带大括号的表示在导出文件中使用的是`export class 组件类名称 extends Component`  
而我们常见的带大括号引入的组件，都是从一些第三方库中引入的组件文件，例如从`react-native`中引入的`View，Text`组件。这些都是固定的组件名字，他是需要查看文档，我想引入一个`View`，就必须知道在这个第三方库中存在`View`这个第三方组件，况且一个第三方库中有许许多多的组件，因此必须知道确切的名称才能进行导入，而不能自己随意的起名。  
**第二种方式：**  
不带大括号是使用 `export default 组件类名称`的方式将组件类进行导出。此时一般都是一些自定义的组件，况且在自定义组件中一般一个文件只有一个组件，因此只要`import` 的来源是正确的，就可以将组件类的名称进行自定义取名 `import Test from "../../TestCompontent"`  
**总结：**  
1：其实上述两种方式的区别主要就是`export class` 和`export default class` 的区别。使用`export default`的方式将组件导出时就可以将组件类的名称进行自定义。如果使用`export`的方式进行自定义，那么就必须按照定义组件类时的名称进行导入。  
2：有帮助的博客链接：  
[https://segmentfault.com/a/1190000018064918?utm\_source=tag-newest][https_segmentfault.com_a_1190000018064918_utm_source_tag-newest]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]: /images/20220321/a18adfef09594298aa0e7a5fde45b1ea.png
[https_segmentfault.com_a_1190000018064918_utm_source_tag-newest]: https://segmentfault.com/a/1190000018064918?utm_source=tag-newest