Grundelement Rendering in ReactJS funktioniert nicht

Ich lerne ReactJS. Ich besuchte this, um einige grundlegende Lektionen zu haben. Nach dem ersten Stunde durchläuft, konnte ich folgenden Code schreiben:Grundelement Rendering in ReactJS funktioniert nicht

<!DOCTYPE html> 
<html> 

    <head> 

     <meta charset="utf-8"> 

     <title>Hello world with date time in ReactJS</title> 

     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 


    </head> 

    <body> 

     <div id="root"></div> 


     <script type="text/jsx"> 

      const element = <h1>Hello, world</h1>; 
      ReactDOM.render(
       element, 
       document.getElementById('root') 
      ); 

     </script> 


    </body> 

</html>

Aber zu meiner Überraschung, funktioniert es here aber nicht auf meinem Computer oder auf meiner Geige here. Können Sie mir bitte zeigen, warum mein Code nicht funktioniert? Vielen Dank.

Quelle

2017-05-21 Nizamuddin Shaikh

Ändern text/jsx zu text/babel. Es klappt.

Quelle

2017-05-21 10:04:07 jiexishede

Ihre rechte jiexishede! es funktionierte. Danke vielmals. –

Ist es möglich, dass ich ein anderes Element erstellen kann, sagen wir einen Link unter h1 Element im selben div, denn wenn ich einen anderen Code unter dem obigen Code schreibe, wird das vorherige Element nicht angezeigt, warum? –

@NizamuddinShaikh Bitte zeigen Sie Ihren Code in der Geige. 'const Element =

< h1> Hello,world < /h1>< h2> Hello,world.TOO < /h2>

; 'Ich schreibe diesen Code in die Geige. Es zeigt. – jiexishede

Das Problem ist, dass Sie keine JSX-Verarbeitung aktiviert haben.
Wenn Sie jsFiddle verwenden, können Sie Ihren JS-Code in den JavaScript-Bearbeitungsbereich verschieben und auf die Schaltfläche "Einstellungen" in der oberen rechten Ecke dieses Abschnitts klicken und dann unter Sprache auswählen Babel + JSX auswählen.

Quelle

2017-05-21 10:04:11

Ja, Bartek, du hast recht, die Fidel funktioniert, nachdem du deine obigen Vorschläge gemacht hast. Danke vielmals. –

Können Sie bitte etwas Licht auf die zweite Frage werfen –

Grundelement Rendering in ReactJS funktioniert nicht

Antwort

Verwandte Themen