Question

我正在学习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：type不应为null，未定义，布尔值或数字。它应该是一个字符串（对于DOM元素）或一个ReactClass（用于复合组件）。

这个错误......

错误：元素类型无效：期望一个字符串（用于内置组件）或类/函数（对于复合组件）但是得到了：对象。

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

提前致谢。

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

此外，您的主页组件后还有一个'：

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

React JS警告：React.createElement：

1 个答案: