React JS錯誤需要ReactRouter後 - 警告：React.createElement：類型不應該爲空，未定義，布爾值或數字

我想學習ReactJS此刻，所有不同的教程使用ES5/ES6和所有React版本的其他差異至少可以說是有點令人沮喪。任何人都可以看到爲什麼下面的代碼會拋出以下錯誤到控制檯？React JS錯誤需要ReactRouter後 - 警告：React.createElement：類型不應該爲空，未定義，布爾值或數字

錯誤消息：

警告：React.createElement：類型不能爲空，未定義的，布爾型，或數量。它應該是一個字符串（對於DOM元素）或一個ReactClass（對於複合組件）

未捕獲的不變式違例：元素類型無效：預期爲字符串（對於內置組件）或類/函數）但得到：對象。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, Navigation } from 'react-router' 


/* 
    Main App layout 
*/ 

var App = React.createClass ({ 
    render: function() { 
     return (
      <div className="catch-of-the-day"> 
       <div className="menu"> 
        <Header tagline="Seafood and Eat it!"/> 
       </div> 
       <Order/> 
       <Inventory/> 
      </div> 
     ) 
    } 
}); 


/* Header */ 

var Header = React.createClass ({ 
    render: function() { 
     return (
      <header className="top"> 
       <h1>Catch 
       <span className="ofThe"> 
        <span className="of">of</span> 
        <span className="the">the</span> 
       </span> 
        day</h1> 
       <h3><span>{this.props.tagline}</span></h3> 
      </header> 
     ) 
    } 
}); 

/* Order */ 

var Order = React.createClass ({ 
    render: function() { 
     return (
      <p>Order</p> 
     ) 
    } 
}); 

/* <Inventory/> */ 

var Inventory = React.createClass ({ 
    render: function() { 
     return (
      <p>Inventory</p> 
     ) 
    } 
}); 


/* 
    Store Picker 
    This will let us make <StorePicker/> 
*/ 

var StorePicker = React.createClass ({ 
    render: function() { 
     return (
      <form className="store-selector"> 
       <h2>Please enter a store</h2> 
       <input type="text" ref="storeId" /> 
       <input type="submit" /> 
      </form> 
     ) 
    } 
}); 

/* 
    Routes 
*/ 

var Routes = (
    <Router> 
     <Route path="/" component={StorePicker} /> 
     <Route path="/store/:storeid" component={App} /> 
    </Router> 
) 

ReactDOM.render(<Routes/>, document.querySelector('#main'));

來源

2016-04-28 James

試試這個：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, Navigation } from 'react-router' 


ReactDOM.render(
    <Router> 
     <Route path="/" component={StorePicker} /> 
     <Route path="/store/:storeid" component={App} /> 
    </Router>, 
    document.querySelector('#main'));

來源

2016-04-28 10:10:33

偉大的工作，所以這個問題實際上是我的組件？ – James

是的。我認爲問題在這裏：component = {StorePicker}。你不應該使用引號。 –

你告訴我們的代碼不包括您如何導入您的組件StorePicker和應用程序，但我可以告訴你，通過寫

component="{App}"

您將一個字符串作爲參數傳遞給Route組件，以傳遞組件，您應該寫：

<Route path="/store/:storeid" component={App} />

希望這可以幫助你！

來源

2016-04-28 10:21:56 Cithel

感謝您的幫助，我添加了我的組件代碼。我也從我的路線中刪除了「」（很好的發現）。不幸的是，我仍然收到同樣的錯誤。 – James

好的問題躺着，我的路由器組件，我實際上並沒有渲染得當，下面正確的代碼：

/* 路線 */

VAR路線= React.createClass（{ 渲染：函數（）{ 回報（）; } }）; RewriteDOM.render（，document.querySelector（'＃main'））;

來源

2016-04-28 10:32:31 James

React JS錯誤需要ReactRouter後 - 警告：React.createElement：類型不應該爲空，未定義，布爾值或數字

回答

相關問題