ReactJS: Warum taucht mein Div nicht auf?

Ich habe grundlegende index.html und index.js, die nicht viel außer dem Minimum tun. Meine HTML-Datei ist dies:ReactJS: Warum taucht mein Div nicht auf?

<head> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body> 
    <div id="container"></div> 
</body> 
<script src="fb's react url"></script> 
<script src="fb's reactDOM url"></script> 
<script type="text/jsx" src="index.js"></script>

und meine index.js Datei ist dies:

var Grid = React.createClass({ 
     getInitialState: function() { 
     return { 
      grid: "Ola!" 
     } 
     }, 
     componentDidMount: function() { 

     }, 
     render: function() { 
     return (<div> { 
      Ola! 
      } </div> 
     ); 
     } 
    } 
); 

ReactDOM.render(< Grid/> , 
    document.getElementById('container') 
);

Wenn ich meine Seite (index.html) in Google Chrome laden, bekomme ich nur einen leeren weißen Bildschirm . Die Konsole gibt keine Fehler aus. Was könnte schief gehen? Ich bin sehr neu in React.js und den meisten Webtechnologien.

Quelle

2016-05-13 Jonathan Allen Grant

Auf den ersten Blick '' Ola innen 'render' von JavaScript analysiert wird (was falsch ist) und diese Leerzeichen um jedes Tag herum könnten etwas vermasseln. – Scott

Was soll ich dann in render machen? –

https://jsfiddle.net/9fcyrbj3/

In JSX, alles, was in geschweiften Klammern ist, wird als Javascript ausgewertet werden, so muss es ein gültiger JS Ausdruck. { Ola! } müsste daher { 'Ola!' } werden.

Allerdings brauchen Sie nicht geschweiften Klammern hier und man konnte es so vereinfachen:

render: function() { 
    return (<div> Ola! </div>); 
    }

Quelle

2016-05-13 19:49:32

Ändern Sie Ihre render Methode wie folgt. Die {} in ReactJS wertet den Inhalt innen als Ausdruck

render: function() { 
    return ( 
     <div> Ola! </div> 
    ); 
    }

Quelle

2016-05-13 19:46:34

ReactJS: Warum taucht mein Div nicht auf?

Antwort

Verwandte Themen