React.createElement:类型不应为null或未定义
React.createElement: type should not be null or undefined
以下是浏览器日志中显示的内容:
[HMR]正在等待WDS的更新信号。。。
ok路由器
警告:React.createElement:type不应为null、undefined、boolean或number。它应该是字符串(对于DOM元素)或ReactClass(对于复合组件)。
ok数据包装
invariant.js:38未捕获的不变量冲突:元素类型无效:应为字符串(用于内置组件)或类/函数(用于复合组件),但得到:未定义。
[WDS]热模块更换已启用。
我的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>
);
CCD_ 4为
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")
在服务器上工作。
最后我发现了react-router
中不推荐使用的方法所引起的问题。
在react-router 2.0
中使用Router
和history
的正确方法是:
import {Router, browserHistory} from "react-router";
...
ReactDOM.render(<DataWrapper data={data}><Router history={browserHistory}>{router}</Router></DataWrapper>, document.querySelector('#app'));
相关文章:
- 无法获取属性'selectedIndex'的未定义引用或null引用
- 为什么localStorage[“..”]未定义,而localStorage.getItem(“..”)为null
- 当null应该在javascript中使用而不是未定义时
- React.createElement:类型不应为null或未定义
- 对象为null或IE9中存在未定义错误
- 如何在JavaScript中检查变量是否为null和/或未定义
- Microsoft JScript运行时错误:无法获取属性'的值;样式':对象为null或未定义
- 无法获取属性'字符串'的未定义或null引用IE 11 ASP.NET
- SCRIPT5007:无法获取属性'长度'的未定义引用或null引用
- 无法获取属性'setActionableButtonState'的未定义引用或null引用
- Highcharts无法设置属性'的值;要点':对象为null或未定义
- IE错误:无法设置属性'的值;样式':对象为null或未定义
- moment:Array.prototype.some在null或未定义时被调用
- 无法获取属性'偏移'的未定义引用或null引用
- 具有null或未定义值的JavaScript字符串串联行为
- Javascript-函数获取数组元素参数未定义/为null
- 无法在jasmine it函数中将未定义或null转换为对象
- JS:未定义值和未定义类型,以及null值和null类型之间的区别
- IE:无法获取属性'的值;clientWidth':对象为null或未定义
- 检查AJAX响应数据是否为空/空白/null/未定义/0