Реагировать 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:

ответ

Смежные вопросы