2015-12-09 16 views
5

Mam plik commentBox.jsx, z następującego kodu:React klasa nie jest zdefiniowana (text/Babel)

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

W index.html, chcę, aby uczynić ten składnik:

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

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

Ale dostaję błąd: "CommentBox nie jest zdefiniowany"; Dlaczego to nie działa? Jeśli umieściłem cały kod w jednym pliku (commentBox.js) - to zadziała.

Odpowiedz

3

Musisz zadeklarować var CommentBox; we własnym bloku skryptu powyżej dwóch pozostałych. Zakres twoich zmiennych nie jest współdzielony między importowanymi skryptami.

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

Można również usunąć var z pliku jsx.

+0

To zadziałało dla mnie. Pamiętaj, aby użyć '

0

CommentBox nie jest zadeklarowany. Jeśli chcesz, to w ten sposób, a następnie kody powinny iść tak:

<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

Co możesz powiedzieć o obiekcie ReactDom w tym kodzie? Czy nie zostało to zadeklarowane? –

+0

ReactDom jest biblioteką używaną do renderowania komponentu do DOM i powinna zostać zaimportowana do kodu, ale sam komponent, taki jak CommentBox, również nie jest zdefiniowany. – vistajess

+0

To jest zła odpowiedź)) CommentBox dodałem przed wywołaniem ReactDOM.render. Musi istnieć w globalnym zasięgu obiektu okna –

Powiązane problemy