은 JS 경고 반응 내가 reactjs을 배우고 아래의 코드를 실행할 때 오류가 점점 오전

: 이것은 "에 대한"섹션 메뉴를 렌더링해야은 JS 경고 반응 내가 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 구현에 의해 매핑됩니다. 메뉴 항목 중 하나를 클릭하면 해당 구성 요소가 메뉴 아래에 렌더링됩니다.

하지만 다음과 같은 경고를 얻고있다 ...

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 경고 반응 내가 reactjs을 배우고 아래의 코드를 실행할 때 오류가 점점 오전

답변

관련 문제