解决由于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...
解决由于export,import错误导致的元素类型无效【Element type is invalid】相关推荐
- 未捕获的错误:始终违反:元素类型无效:预期为字符串(对于内置组件)或类/函数,但得到了:对象
本文翻译自:Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in ...
- 【系统故障】解决动态库路径错误导致ImportError: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21‘ not found 的问题
https://www.jianshu.com/p/329774bacfd2 https://blog.csdn.net/Yonggie/article/details/120332494 https ...
- 解决使用jQuery采用append添加的元素事件无效的方法
当我们使用jQuery动态加载html元素,但是元素上面又绑定了Click等事件,针对新添加的元素这些事件是无效的,那么应该怎样解决呢? live方法 live( type, fn ) jQuery ...
- Export/Import 使用技巧与常见错误
Export 和 Import 是一对读写Oracle数据的工具. Export 将 Oracle 数据库中的数据输出到操作系统文件中, Import 把这些文件中的数据读到Oracle 数据库中. ...
- fundebug php,import提升导致Fundebug报错的解决方法(详细)
本篇文章给大家带来的内容是关于import提升导致Fundebug报错的解决方法(详细),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 摘要: 解释一下"请配置apikey ...
- VS2015 解决 “有太多的错误导致IntelliSense引擎无法正常工作,其中有些错误无法在编辑其中查看”问题
最近做项目使用VS2015时,在工程文件的开头出现一个错误 "有太多的错误导致IntelliSense引擎无法正常工作,其中有些错误无法在编辑其中查看",如下图所示. 参考了这篇, ...
- 解决键盘模式(布局)的错误导致的部分键位失灵或异常(姑且这样描述问题吧)
问题描述: 我的vmware虚拟机截至目前安装了三个系统分别是win xp, linux ubuntu, linux redhat,安装好后,我在陆续的使用过程中,发现了问题: 在我的redhat和u ...
- python import random 报错_导致python中import错误的原因是什么
Python程序可以调用一组基本的函数(即内建函数),比如print().input()和len()等函数.Python本身也内置一组模块(即标准库).每个模块都是一个Python程序,且包含了一组相 ...
- 解决Linux服务器磁盘爆满导致的MySQ错误Can‘t connect to local MySQL server through socket ‘/var/lib/mysql/mysql.sock
@[解决Linux服务器磁盘爆满导致的MySQ错误Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.so ...
最新文章
- java if and_Java运算符-if分支语句
- c语言程序既可以编译执行也可以解释执行,2016年山东农业大学信息科学与工程学院C语言程序设计(同等学力加试)复试笔试仿真模拟题...
- 1138 Postorder Traversal (25 分)【难度: 一般 / 知识点: 建树】
- 数学笔记--线性代数
- linux比较两个文件md5,linux下如何批量比对两个文件的MD5值是否一致,SHA1是否一致。...
- C++中如何定义动态数组
- Android网络请求开源框架retrofit的基本GET用法(2.4版本)
- js 根据时间生成唯一订单号
- js面向对象2--原型
- 列级触发器 SQL Server
- Raspberry Pi 的新用法:检测家中的漏水情况
- [转载] 晓说——第23期:大师照亮八十年代
- WSUS 3.0 SP2 部署安装
- java trim 换行符_JAVA去掉字符串左右两边的回车、空格、制表符、换行符
- 路由器与计算机的ip地址,路由器ip地址与mac地址绑定
- 微信小程序搜索排名规则,教你怎么让排名靠前
- android天气api接口,[Android] 免费天气预报接口
- 时势造英雄,快影成长启示录
- freemarker生成word不显示图片
- 【电力预测】基于matlab GUI灰色模型电力负荷预测【含Matlab源码 769期】