リアクションjsの問題

Question

私はreactJSの助けが必要です。私はコードを書く仕事があります。ユーザーがこのコードを開くと、別のユーザーをゲームに送るためのボタンが表示されます。このボタンをクリックすると、2つのボタンがinvintationを辞退するか、受け入れることがわかります。

しかし、ブラウザに空のページが表示されます。

これは私のコードです：

<div id = "gameInterface"></div> 

<script type = "text/babel"> 
    var gameInterface = React.createClass({ 
     getInitialState: function(){ 
      return {document.getElementsByClassName('send')} 
     }, 
     render: function(){ 
      if (document.getElementById('send').state.onclick){ 
       document.getElementById('decline') && document.getElementById(accept).value; 
      } 
     }, 
     buttonToSendInvintation: function(){ 
      return (
       <div> 
        <button className = 'send'>Send invintation to play to another user</button> 
       </div> 
      ) 
     }, 
     buttonToAceptOrDeclineInvintation: function(){ 
      return (
       <div> 
        <p>Some user sent you an invintation</p> 
        <button className = 'accept'>Accept</button> 
        <button className = 'decline'>Decline</button> 
       </div> 
      ); 
     } 
    }); 

    ReactDOM.render(<gameInterface />, document.getElementById("gameInterface")); 
</script> 

は私が間違って何をしたのですか？

Answer 1

反応すると、カスタムコンポーネントは、camelCaseではなくPascalCaseに存在する必要があります。

React.createElement(gameInterface, null); 

：代わりにあなたが望んでいるものの

React.createElement("gameInterface", null); 

：バベルJSXのtranspilerは小文字（すなわち「gameInterface」内）で始まる要素を見れば、それはそれをtranspileます

あなたが作成したクラスへの参照です。 Reactは、ネイティブDOM要素とカスタムコンポーネントを区別することです。コンポーネント名を大文字にすると、適切な動作が得られます。