阵营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：

回答

相关问题