Réagir le mot clé de retour JSX ne fonctionne pas

Question

Il m'a fallu plus de 2 heures pour comprendre profondément l'expérience.

Dans l'extrait suivant, return ne fonctionne pas comme prévu:

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

Pour plus de précisions que je voulais avoir return et ce qui doit être retourné dans plusieurs lignes.

Mais la ligne ci-dessous ne travaille:

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

Answer 1

Mon erreur était que je devais faire une des opérations suivantes:

1. Ecrire return et le reste dans une seule ligne:

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

2. Enveloppe t il revient avec résultat entre parenthèses:

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

Oui, la JS moderne est sensible!

Answer 2

Tout votre contenu doit être enveloppé dans une balise parent. Une syntaxe typique de retour ressemble à ceci:

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

Notez que le parent <div></div>. Vous pouvez le remplacer par <h1></h1>, <b></b>, etc.