React JSX Return-Schlüsselwort funktioniert nicht

Question

Es dauerte mehr als 2 Stunden, um die Erfahrung tief zu verstehen.

Im folgenden Ausschnitt wird return nicht wie erwartet:

return 
<VideoItem 
    key={video.etag} 
    changeVideo={changeVideo} 
    video={video} />; 

Weitere Klärung wollte ich return haben und was in mehreren Zeilen zurückgegeben werden soll.

Aber die Linie unterhalb weder Werke:

return 
<VideoItem key={video.etag} changeVideo={changeVideo} video={video} />; 

Answer 1

Mein Fehler war, dass ich die eine der folgenden zu tun hatte:

1. schreiben return und den Rest in einer einzigen Zeile:

   return <VideoItem key={video.etag} changeVideo={changeVideo} video={video} />; 
   

2. Verpackung t er zurückkehr Ergebnis mit Klammern:

   return (
       <VideoItem 
        key={video.etag} 
        changeVideo={changeVideo} 
        video={video} />); 
   

Ja, die moderne JS ist, die empfindlich!

Answer 2

Ihr gesamter Inhalt sollte in einem übergeordneten Tag eingeschlossen sein. Eine typische Return Syntax sieht so aus:

return (
    <div> 
    Everything you do should be here....... 
    </div> 
); 

Hinweis der Eltern <div></div>. Sie können es in alles wie <h1></h1>, <b></b> usw. ändern.