陣營JS警告：React.createElement：

我學習reactjs和執行下面的代碼時，我得到錯誤：陣營JS警告：React.createElement：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>React Tutorial</title> 

    <link rel="stylesheet" href="css/base.css" /> 
    <script type="text/javascript" src="scripts/react-15.0.1.js"></script> 
    <script type="text/javascript" src="scripts/react-dom.js"></script> 
    <script type="text/javascript" src="scripts/reactrouter-2.4.1.js"></script> 
    <script type="text/javascript" src="scripts/babel-core-5.6.16-browser.js"></script> 
    <script type="text/javascript" src="scripts/jquery-2.2.2.js"></script> 
    <script type="text/javascript" src="scripts/marked-0.3.5.js"></script> 
    </head> 
    <body> 

    <div id="app20"></div> 
    <script type="text/javascript" src="scripts/index.js"></script> 
    <script type="text/babel" src="scripts/example.js"></script> 
    </body> 
</html> 

I am using react router to see how the menu works. index.js is classnames js of jedwatson and example.js contains code as below 

    var Home = React.createClass({ 
     render() { 
      return ( 
      <div> 
       <h1>Home...</h1> 
      </div> 
     ); 
     } 
    });' 

    var About = React.createClass({ 
     render() { 
      return (
      <div> 
       <h1>About...</h1> 
      </div> 
     ); 
     } 
    }); 

    var Contact = React.createClass({ 
     render() { 
      return (
      <div> 
       <h1>Contact...</h1> 
      </div> 
     ); 
     } 
    }); 



    var App20 = React.createClass({ 
     render() { 
      return (
      <div> 
       <ul> 
        <li><ReactRouter.Link to="/home">Home</ReactRouter.Link></li> 
        <li><ReactRouter.Link to="/about">About</ReactRouter.Link></li> 
        <li><ReactRouter.Link to="/contact">Contact</ReactRouter.Link></li> 
       </ul> 

       {this.props.children} 
      </div> 
     ); 
     } 
    }); 


    ReactDOM.render((<ReactRouter history = {ReactRouter.browserHistory}> 
         <ReactRouter.Route path = "/" component = {App20}> 
         <ReactRouter.IndexRoute component = {Home} /> 
         <ReactRouter.Route path = "home" component = {Home} /> 
         <ReactRouter.Route path = "about" component = {About} /> 
         <ReactRouter.Route path = "contact" component = {Contact} /> 
         </ReactRouter.Route> 
        </ReactRouter>), document.getElementById('app20'));

這應該渲染「關於」部分的菜單，「家」，「接觸「這是由react-router實現映射的。當點擊其中一個菜單項時，相應的組件應顯示在菜單下方。

但我得到以下警告...

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

而且這個錯誤...

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

，如果你能幫助我，我將不勝感激。

在此先感謝。

來源

2016-06-09 Ganesh G

的可能的複製[什麼是一個NullReferenceException，以及如何解決？（http://stackoverflow.com/questions/ 4660142/what-is-a-nullreferenceexception-and-how-do-i-fix-it） – DVK

對於你和任何試圖幫助更清楚地看到問題的人來說，更短的代碼可能會更容易一些嗎？ – DannyB

您有一個小的錯字。 :)

ReactDOM.render((<ReactRouter.Router history={ReactRouter.browserHistory}> 
        <ReactRouter.Route path = "/" component = {App20}> 
        <ReactRouter.IndexRoute component = {Home} /> 
        <ReactRouter.Route path = "home" component = {Home} /> 
        <ReactRouter.Route path = "about" component = {About} /> 
        <ReactRouter.Route path = "contact" component = {Contact} /> 
        </ReactRouter.Route> 
       </ReactRouter.Router>), document.getElementById('app20'));

你失蹤了<ReactRouter.Router ...一部分，你剛<ReactRouter ...。

此外，還有您的主頁組件後，一個額外的'：

    <h1>Home...</h1> 
     </div> 
    ); 
    } 
});'

來源

2016-06-09 14:36:43 ctrlplusb

很多很多謝謝我怎麼能讓你犯了我這樣一個愚蠢的錯誤。現在代碼正在工作。我有一個想法，一定有一些錯誤的錯誤，我嘗試了2/3小時，但失敗了，你在幾秒鐘內解決了。非常感謝您的幫助 –

沒問題！ :)祝你在React的旅程中幸運。它的超級樂趣，所以保持在它！ :) – ctrlplusb

當您開始對React感到更加舒適，並且設置IDE時，請嘗試查看諸如'eslint'之類的工具，以幫助識別錯誤。我不確定是否會遇到'ReactRouter.Router'問題，但鬆散的'''肯定會被看到。 – ctrlplusb

陣營JS警告：React.createElement：

回答

相關問題