erreur Wepack: éléments adjacents JSX doivent être enveloppés dans une balise englobante

Question

Après avoir créé un nouveau composant et l'utiliser dans mon composant principal et en cours d'exécution webpack je reçois l'erreur

éléments adjacents JSX doivent être enveloppés dans un englobante tag

Voici mon extrait de code:

var React = require('react'); 
var Nav = require('Nav'); 

var Main = React.createClass({ 
    render : function(){ 
    return (
     <Nav /> 
     <h2>Main Component</h2> 
    ); 
    } 
}); 

Answer 1

Quand il y a plusieurs éléments, vous avez besoin de l'envelopper de sorte qu'il est seulement un retour:

var Main = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <Nav /> 
     <h2>Main Component</h2> 
     </div> 
    ); 
    } 
}); 

Answer 2

Le message d'erreur est assez explicite: Vous ne pouvez pas retourner

(
    <Nav /> 
    <h2>Main Component</h2> 
) 

parce qu'ils sont deux composants. Enveloppez-les dans quelque chose d'autre avant de le retourner.

Answer 3

Il doit être enveloppé par un élément racine

<div> 
    <Nav/> 
    <h2>Main Component</h2> 
    </div>