0
這裏是瀏覽器的記錄中顯示的內容:React.createElement:類型不能爲空或未定義
[HMR]等待從WDS更新信號...
確定路由器
警告:React.createElement:type不應該爲null,undefined,boolean或number。它應該是一個字符串(用於DOM元素)或ReactClass(用於複合組件)。
OK datawrapper
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>
);
和Index.jsx
我s:
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")
在服務器中工作。
該方法已過時,你使用和更換? – rogierschouten
@rogierschouten'createBrowserHistory()',該方法如何創建'history'。您可以比較我的問題和我的答案中的代碼。 –