解决因为export，import错误致使的元素类型无效【Element type is invalid】

前些日子作项目时有一个报错，虽然解决了，可是对于致使的缘由，仍是只知其一;不知其二。今天忽然发现一篇博客，大受启发，决定将这个问题系统的总结一下。

报错信息：

提示元素类型无效，多是忘记从你定义的文件中导出来组件，或者是你弄混了要导入的组件的默认名字，没有和你导入时的名字相对应。

解决方式：

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/11...