[英]React Error - Uncaught Invariant Violation: Element type is invalid
...expected a string (for built-in components) or a class/function (for composite components) but got: object. ...期望一个字符串(用于内置组件)或一个类/函数(用于复合组件)但得到:object。
Hi I'm currently trying my hand at React, I'm following a tutorial which is outdated, which is causing some problems. 嗨,我正在尝试React,我正在按照一个过时的教程,这会导致一些问题。 I'm trying to amend the errors myself as I go along, however I have stumbled whilst trying to set up Routes, and receive this error;
我正在尝试自己修改错误,但是在尝试设置路由时遇到了绊倒,并收到此错误;
Error Message 错误信息
Uncaught Invariant Violation: Element type is invalid expected a string (for built-in components) or a class/function (for composite components) but got: object.
The code the I suspect is causing this is on my app-client.js file which looks like; 我怀疑导致这个问题的代码在我的app-client.js文件中看起来像;
app-client.js APP-client.js
var React = require('react'),
Router = require('react-router'),
ReactDOM = require('react-dom'),
Route = Router.Route,
DefaultRoute = Router.DefaultRoute,
App = require('./components/App'),
Audience = require('./components/audience').default,
Speaker = require('./components/speaker'),
Board = require('./components/board'),
routes;
routes = (
<Route handler = {App}>
<DefaultRoute handler={Audience} />
<Route path="speaker" handler={Speaker}></Route>
<Route path="board" handler={Board}></Route>
</Route>
);
ReactDOM.render(<Router>{routes}</Router>, document.getElementById('react-container'));
I don't suspect it is coming from my app.js file but for the sake of finding out what is wrong I have included it; 我不怀疑它来自我的app.js文件,但为了找出错误我已经包含它;
App.js App.js
var React = require('react'),
Router = require('react-router'),
RouteHandler = Router.RouteHandler,
io = require('socket.io-client'),
Header = require('./parts/header.js'),
App;
App = React.createClass({
getInitialState() {
return {
status: 'disconnected',
title: ''
}
},
componentWillMount() {
this.socket = io('http://localhost:5432/');
this.socket.on('connect', this.connect);
this.socket.on('disconnect', this.disconnect);
this.socket.on('welcome', this.welcome);
},
connect() {
this.setState({ status: 'connected' });
},
disconnect() {
this.setState({ status: 'disconnect'});
},
welcome(serverState) {
this.setState({ title: serverState.title });
},
render() {
return (
<div>
<Header title={this.state.title} status={this.state.status} />
<RouteHandler />
</div>
);
}
});
module.exports = App;
Can someone point me in the direction of an answer or somewhere that can provide more information about this. 有人能指出我的答案方向或可以提供更多相关信息的地方。
It looks like you're trying to create a <Router/>
with the wrong thing (the whole react-router library). 看起来你正在尝试用错误的东西创建一个
<Router/>
(整个react-router库)。 Try changing 尝试改变
Router = require('react-router'),
to 至
Router = require('react-router').Router
so you can use the Router property from React-router, not the whole module itself. 所以你可以使用来自阵营的路由器,而不是整个模块本身的路由器性能。
As for the error message: React expects either a string or ReactClass (which is a function/es6 class) passed as the first argument to React.createElement()
. 至于错误消息:React要求将一个字符串或ReactClass(这是一个函数/ es6类)作为第一个参数传递给
React.createElement()
。 JSX is just a way to turn xml-style markup into the proper set of React.createElement()
's for you. JSX只是一种将xml样式标记转换为适当的
React.createElement()
集合的React.createElement()
。 So, when you're trying to create <Router/>
, React.createElement(Router) is being created and the whole react-router object gets passed in, thus the complaint :) 因此,当您尝试创建
<Router/>
,正在创建React.createElement(路由器)并传入整个react-router对象,因此投诉:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.