2016-05-14 44 views
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")在服務器中工作。

回答

0

最後我想出了由於react-router中被棄用的方法引起的問題。

react-router 2.0使用Routerhistory正確的做法是:

import {Router, browserHistory} from "react-router"; 

... 

ReactDOM.render(<DataWrapper data={data}><Router history={browserHistory}>{router}</Router></DataWrapper>, document.querySelector('#app')); 
+0

該方法已過時,你使用和更換? – rogierschouten

+0

@rogierschouten'createBrowserHistory()',該方法如何創建'history'。您可以比較我的問題和我的答案中的代碼。 –

相關問題