解决由于export,import错误导致的元素类型无效【Element type is invalid】

72次阅读

共计 1065 个字符,预计需要花费 3 分钟才能阅读完成。

前些日子做项目时有一个报错,虽然解决了,但是对于导致的原因,还是一知半解。今天突然发现一篇博客,大受启发,决定将这个问题系统的总结一下。
报错信息:
提示元素类型无效,可能是忘记从你定义的文件中导出来组件,或者是你弄混了要导入的组件的默认名字,没有和你导入时的名字相对应。
解决方式:
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…

正文完
 0