React.createElement:类型不应为空或未定义
React.createElement:类型不应为空或未定义
提问于 2016-05-14 08:51:25
以下是浏览器日志中显示的内容：
等待来自WDS的更新信号..。 ok路由器 警告: React.createElement: type不应为空、未定义、布尔或数字。它应该是一个字符串(用于DOM元素)或一个ReactClass (用于组合组件)。 好的数据采集器 invariant.js:38不变量冲突:元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但未定义。 启用热模块替换。
我的webpack条目文件app.jsx是：
import React from "react";
import Router from "react-router";
import ReactDOM from "react-dom";
import createBrowserHistory from 'history/lib/createBrowserHistory';
import router from "./router/router";
import DataWrapper from './container/DataWrapper';
if (process.env.BROWSER && process.env.NODE_ENV === 'development') {
require('../../public/css/app.css');
}
let history = createBrowserHistory();
let data = JSON.parse(document.querySelector('#data').innerHTML);
ReactDOM.render(<DataWrapper data={data}><Router history = {history}>{router}</Router></DataWrapper>, document.querySelector('#app'));DataWrapper.jsx是：
import React from 'react';
class DataWrapper extends React.Component {
constructor(props) {
super(props);
}
getChildContext() {
return {
data: this.props.data
};
}
render() {
console.log("ok datawrapper");
return this.props.children;
}
}
DataWrapper.childContextTypes = {
data: React.PropTypes.object.isRequired
};
export default DataWrapper;router.jsx是：
import React from "react";
import {Route, IndexRedirect} from "react-router";
import Index from '../components/Index'
console.log("ok router");
export default(
<Route path='/' component={Index}>
</Route>
);Index.jsx是：
import React from 'react';
class Index extends React.Component {
constructor(props, context) {
super(props, context);
}
render() {
console.log("ok");
return (
<div style={{height: '100%'}}>
hello world
<div style={{display: 'none'}} id="data">{JSON.stringify(this.context.data)}</div>
</div>
);
}
};
Index.propTypes = {
location: React.PropTypes.object
};
Index.contextTypes = {
data: React.PropTypes.object.isRequired
};
export default Index;该警告似乎没有影响服务器呈现。console.log("ok")在服务器中工作。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-05-14 10:51:12
最后，我指出了react-router中不推荐的方法所造成的问题。
在Router和history中使用react-router 2.0的正确方法是：
import {Router, browserHistory} from "react-router";
...
ReactDOM.render(<DataWrapper data={data}><Router history={browserHistory}>{router}</Router></DataWrapper>, document.querySelector('#app'));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37224641
复制相关文章
相似问题
腾讯云开发者
