Reagieren js Probleme

Question

Ich brauche Hilfe mit reacJS. Ich habe eine Aufgabe, einen Code zu schreiben. Wenn ein Benutzer diesen Code öffnet, sieht er eine Schaltfläche, um einen anderen Benutzer an ein Spiel zu senden. Wenn ich auf diese Schaltfläche klicke, sehe ich, dass 2 Schaltflächen die Invitation ablehnen oder akzeptieren.

Aber mein Browser zeigt leere Seite.

dies ist mein Code:

<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> 

Was habe ich falsch gemacht?

Answer 1

In Reaktion müssen benutzerdefinierte Komponenten in PascalCase sein, nicht CamelCase. Wenn das babel jsx Transpiler ein Element sieht, die mit einem Kleinbuchstaben beginnt (dh in 'gameInterface'), wird es transpile es an:

React.createElement("gameInterface", null); 

statt, was Sie hoffen auf:

React.createElement(gameInterface, null); 

Dies ist eine Referenz auf die Klasse, die Sie erstellt haben. Reagieren bedeutet dies, zwischen nativen DOM-Elementen und benutzerdefinierten Komponenten zu unterscheiden. Verwenden Sie die Namen Ihrer Komponenten und Sie erhalten das richtige Verhalten:

var GameInterface = React.createClass({ 
    ... 
}) 

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