2015-05-16 8 views
20

Ho seguito un tutorial react.js, con un semplice esempio di ciao mondo. Non riesco a trovare una ragione per cui il seguente non dovrebbe funzionare, ma continuo a ricevere questo errore.Elemento componente non valido in React.JS

Uncaught Error: Invariant Violation: React.render(): Invalid component element. 

Ho il seguente codice. Sembra funzionare se eseguo React.createElement, ma non per gli elementi JSX.

<!doctype html> 
<html> 
<head> 
    <script src="https://fb.me/react-0.13.3.js"></script> 
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script> 
    <script type="text/jsx"> 
     document.body.onload = function(){ 
      console.log("shuff") 
      var HelloWorld = React.createClass({ 
       render: function(){ 
        return <div>Hello, Ian Shuff!</div>; 
       } 
      }); 

      React.render(new HelloWorld(), document.getElementById("test")) 
     } 

    </script> 
</head> 
<body> 
    <div id="test"></div> 
</body> 
</html> 

risposta

21

Si dovrebbe passare a rendere <HelloWorld />, non new HelloWorld()

React.render(<HelloWorld />, document.getElementById("test")) 

Example

jsx-in-depth

Oppure è possibile utilizzare React.createElement, in questo modo

React.render(React.createElement(HelloWorld, null), document.getElementById("test")) 

Example

Problemi correlati