2017-03-16 2 views
0

나는 구문 영역이 어딘가에 있다고 믿지만, 나는 그것을 이해할 수 없다.React not rendering class

참고 : 나는 React를 처음 사용하고 있으며, 개발할 때 Sharepoint를 사용하고 있습니다.

내 JS 파일 :

var newt = React.createClass({ 
    getInitialState: function() { 
     return { 
      greeting: 'This is really', 
      thing: 'code stuff' 
     }; 
    }, 
    render: function() { 
     return (
      <div id="react-newt"> 
       {this.state.greeting} {this.state.thing}! 
      </div> 
     ); 
    } 
}); 

$(function() { 
    if (document.getElementById('newt')) { 
     React.render(
      <newt />, 
      document.getElementById('newt') 
     ); 
     console.log('newt'); 
    } 
}); 

그리고 내 HTML 파일 :

<div id="newt"></div> 

내가 콘솔을 검사하고 나는이 참조 : Console

답변

2

당신이 대문자로 이름을 사용할 필요가 구성 요소. JSX는 소문자를 내장 된 HTML 구성 요소로 취급합니다. 자세한 내용은 User-Defined Components Must Be Capitalized을 참조하십시오.

var Newt = React.createClass({ 
    getInitialState: function() { 
     return { 
      greeting: 'This is really', 
      thing: 'code stuff' 
     }; 
    }, 
    render: function() { 
     return (
      <div id="react-newt"> 
       {this.state.greeting} {this.state.thing}! 
      </div> 
     ); 
    } 
}); 

$(function() { 
    if (document.getElementById('newt')) { 
     React.render(
      <Newt />, 
      document.getElementById('newt') 
     ); 
     console.log('newt'); 
    } 
}); 
+0

대단히 감사합니다! 그게 효과가있어 ... React에 익숙해지면 시간이 좀 걸릴거야, 나는 문서에서 배울 때 꽤 느려. – Snorlax