未捕获的错误：始终违反：元素类型无效：预期为字符串（对于内置组件）或类/函数，但得到了：对象

本文翻译自：Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

I am getting this error: 我收到此错误：

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 未捕获的错误：始终违反：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象。

This is my code: 这是我的代码：

var React = require('react')
var ReactDOM =  require('react-dom')
var Router = require('react-router')
var Route = Router.Route
var Link = Router.Linkvar App = React.createClass({render() {return (<div><h1>App</h1><ul><li><Link to="/about">About</Link></li></ul></div>)}
})var About = require('./components/Home')
ReactDOM.render((<Router><Route path="/" component={App}><Route path="about" component={About} /></Route></Router>
), document.body)

My Home.jsx file: 我的Home.jsx文件：

var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');var Home = React.createClass({render:function() {return (<RaisedButton label="Default" />);},
});module.exports = Home;

#1楼

参考：https://stackoom.com/question/2JCuZ/未捕获的错误-始终违反-元素类型无效-预期为字符串-对于内置组件-或类-函数-但得到了-对象

#2楼

您需要导出默认值或require（path）.default

var About = require('./components/Home').default

#3楼

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Router is also one of the properties of react-router . https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Router也是react-router的属性之一。 So change your modules require code like that: 因此，更改模块需要这样的代码：

  var reactRouter = require('react-router')var Router = reactRouter.Routervar Route = reactRouter.Routevar Link = reactRouter.Link

If you want to use ES6 syntax the link use( import ), use babel as helper. 如果要使用ES6语法链接use（ import ），请使用babel作为帮助程序。

BTW, to make your code works, we can add {this.props.children} in the App , like 顺便说一句，为了使您的代码正常工作，我们可以在App添加{this.props.children} ，例如

render() {return (<div><h1>App</h1><ul><li><Link to="/about">About</Link></li></ul>{this.props.children}</div>)
}

#4楼

Have you just modularized any of your React components? 您是否刚刚对任何React组件进行了模块化？ If yes, you will get this error if you forgot to specify module.exports , for example: 如果是，则如果忘记指定module.exports ，则会出现此错误，例如：

non-modularized previously valid component/code: 非模块化先前有效的组件/代码：

var YourReactComponent = React.createClass({render: function() { ...

modularized component/code with module.exports : 带有module.exports的模块化组件/代码：

module.exports = React.createClass({render: function() { ...

#5楼

In my case ( using Webpack ) it was the difference between: 就我而言（ 使用Webpack ）是以下两者之间的区别：

import {MyComponent} from '../components/xyz.js';

vs 与

import MyComponent from '../components/xyz.js';

The second one works while the first is causing the error. 第二个起作用，而第一个引起错误。 Or the opposite. 或相反。

#6楼

In my case, that was caused by wrong comment symbols. 就我而言，这是由错误的注释符号引起的。 This is wrong: 这是错误的：

<Tag>/*{ oldComponent }*/{ newComponent }
</Tag>

This is correct: 这是对的：

<Tag>{/*{ oldComponent }*/}{ newComponent }
</Tag>

Notice the curly brackets 注意大括号

未捕获的错误：始终违反：元素类型无效：预期为字符串（对于内置组件）或类/函数，但得到了：对象相关推荐

解决由于export，import错误导致的元素类型无效【Element type is invalid】
前些日子做项目时有一个报错,虽然解决了,但是对于导致的原因,还是一知半解.今天突然发现一篇博客,大受启发,决定将这个问题系统的总结一下. 报错信息: 提示元素类型无效,可能是忘记从你定义的文件中导出来 ...
《Python 1》--python的简介、解释器、读取键盘输入函数、变量类型推断、5个标准数据类型、字符串的内置函数、for循环、list列表、tuple元组、字典dictionary
Python 的起源: Python 的创始人为吉多·范罗苏姆(Guido van Rossum) 1. 1989 年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的**解释程序 ...
【Appium】元素探测工具UIautomatorViewer 和Appium destop内置工具
Appium destop内置元素探测工具 platformName-设备平台:填Android或IOS deviceName----设备名:按adb devices查出的设备名填写即可,Androi ...
python什么元素为真_如何使用Python基础内置函数
如何使用Python基础内置函数发布时间:2020-08-05 13:46:59
c++ STL 常用容器元素类型相关限制指针引用
c++ 的 STL 中主要有 vector , list, map, set , multimap,multiset 这些容器完全支持使用内置类型和指针(指针注意内存泄露问题). 就是说乱用智能指针 ...
python中的序列类型数据结构元素的切片操作_PythonI/O进阶学习笔记_4.自定义序列类(序列基类继承关系/可切片对象/推导式)...
前言: 本文代码基于python3 Content: 1.python中的序列类分类 2. python序列中abc基类继承关系 3. 由list的extend等方法来看序列类的一些特定方法 4. l ...
android函数未定义,未捕获的ReferenceError：尝试访问Android时未定义函数webview
我在Android中使用WebView.我使用loadDataWithBaseURL加载以下网址:未捕获的ReferenceError:尝试访问Android时未定义函数webview (这里我用 & ...
python内置函数sum_Python内置函数sum____用来返回数值型序列中所有元素之和。
[单选题]关于函数参数传递中,形参与实参的描述错误的是( ). [判断题]PythonModuleDocs是Python的帮助文档. [单选题]以下关于Python的说法中正确的是哪一项? [判断题] ...
内置对象的API Array数组对象 String字符串对象 json字符串 JSON对象 js作用域及变量预解析引用类型与值类型区别共享引用基本包装类型数组去重
01-内置对象的API a.Date对象获取时间 b.Array对象数组加工 c.String对象字符串加工 d.json字符串的语法格式 e.JSON对象的字符串与对象转换应用 02-JS作用域 a ...

未捕获的错误：始终违反：元素类型无效：预期为字符串（对于内置组件）或类/函数，但得到了：对象

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

未捕获的错误：始终违反：元素类型无效：预期为字符串（对于内置组件）或类/函数，但得到了：对象相关推荐

最新文章

热门文章