2015-12-09 17 views
5

ho lima commentBox.jsx, con seguente codice:Reagire classe non è definita (text/babel)

var CommentBox = React.createClass({ 
    render: function() { 
    return (
     <div className="commentBox"> 
     <h1>Comments</h1> 
     </div> 
    ); 
    } 
}); 

In index.html, voglio rendere questa componente:

<div id="content"></div> 
<script type="text/babel" src="scripts/commentBox.jsx"></script> 

<script type="text/babel"> 
    ReactDOM.render(<CommentBox />, document.getElementById('content')); 
</script> 

Ma sto ricevendo errore: "CommentBox non è definito"; Perché questo non funziona? Se inserirò tutto il codice in un file (commentBox.js) - funzionerà.

risposta

3

è necessario dichiarare var CommentBox; nel proprio blocco di script sopra gli altri due. L'ambito delle tue variabili non è condiviso tra le tue importazioni di script.

<div id="content"></div> 
 
<script> 
 
    var CommentBox; 
 
</script> 
 
<script type="text/babel" src="scripts/commentBox.jsx"></script> 
 
<script type="text/babel"> 
 
    ReactDOM.render(<CommentBox />, document.getElementById('content')); 
 
</script>

È possibile anche rimuovere il var dal file jsx.

+0

Questo ha funzionato per me. Assicurati di usare '

0

CommentBox non è dichiarato. Se si vuole in questo modo, allora i vostri codici dovrebbero andare in questo modo:

<script type="text/babel"> 
var CommentBox = React.createClass({ 
    render: function() { 
    return (
    <div className="commentBox"> 
      <h1>Comments</h1> 
    </div> 
    ); 
    } 
}); 

ReactDOM.render(<CommentBox />, document.getElementById('content')); 

</script> 
+0

Cosa si può dire dell'oggetto ReactDom in questo codice? Non è dichiarato a? –

+0

ReactDom è la libreria utilizzata per eseguire il rendering del componente sul DOM e deve essere importata nel codice, ma anche il componente stesso come CommentBox non è definito. – vistajess

+0

È una risposta errata)) CommentBox ho aggiunto prima della chiamata di ReactDOM.render. Deve esistere nell'ambito globale dell'oggetto finestra –

Problemi correlati