React JS 警告：React.createElement：答案

【问题标题】：React JS Warning: React.createElement:React JS 警告：React.createElement：
【发布时间】：2016-06-09 23:39:45
【问题描述】：

我正在学习 reactjs，执行以下代码时出现错误：

<!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 实现映射的“about”、“home”、“contact”部分。单击其中一个菜单项时，应在菜单下方呈现相应的组件。

但我收到以下警告...

警告：React.createElement：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（用于复合组件）。

还有这个错误...

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（用于复合组件），但得到：对象。

如果你能帮助我，我将不胜感激。

提前致谢。

【问题讨论】：

What is a NullReferenceException, and how do I fix it?的可能重复
也许更短的代码对您和任何试图帮助更清楚地了解问题的人来说会更容易？

标签： reactjs

【解决方案1】：

你有一个小错字。 :)

    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 ...。

另外，在 Home 组件之后还有一个额外的 '：

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

【讨论】：

非常感谢，我怎么会犯你今天犯的这么愚蠢的错误。现在代码正在运行。我有一个想法，我尝试了 2/3 小时但失败了，你必须在几秒钟内解决它。非常感谢您的帮助
没问题！ :) 祝你在 React 的旅途上好运。它超级有趣，所以坚持下去！ :)
当您开始对 React 感到更舒服并设置了 IDE 时，请尝试使用诸如 eslint 之类的工具来帮助识别错误。我不确定它是否会解决ReactRouter.Router 的问题，但肯定会看到松散的'。
感谢您的指导，我一定会听从您的建议。 ' 输入 stackoverflow 问题时发生错误，它在我的原始代码中不存在。