2017-03-16 10 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