web-dev-qa-db-fra.com

Erreur: les éléments JSX adjacents doivent être enveloppés dans une balise englobante.

J'essaie d'imprimer les accessoires d'un composant de réaction mais j'obtiens une erreur. S'il vous plaît aider: 

Snippet: 

<!-- DOCTYPE HTML -->
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
    <script src="http://fb. me/JSXTransformer-0.12.1.js"></script>
    <!-- gap above is intended as else stackOverflow not allowing to post -->
</head>
<body>

    <div id="div1"></div>

    <script type="text/jsx">

        //A component
        var George = React.createClass({
            render: function(){
                return (
                    <div> Hello Dear!</div>
                    <div>{this.props.color}</div>
                );
            }
        });

        ReactDOM.render(<George color="blue"/>, document.getElementById('div1'));

    </script>
</body>
</html>

Je m'attends à "Bonjour mon cher!" et ensuite la ligne "bleu". Mais, je reçois cette erreur à la place.

Erreur:

 enter image description here

javascriptreactjscomponents
6
Deadpool

Réagir v16 et plus tard

À compter de React v16, les composants React peuvent renvoyer un tableau. Ce n'était pas possible avant la v16.

Faire ceci est simple:

return ([  // <-- note the array notation
  <div key={0}> Hello Dear!</div>,
  <div key={1}>{this.props.color}</div>
]);

Notez que vous devez déclarer une clé pour chaque élément du tableau. Selon des sources officielles, ces pourraient deviennent inutiles dans les futures versions de React, mais pas à partir de maintenant. N'oubliez pas non plus de séparer chaque élément du tableau avec , comme vous le feriez normalement avec un tableau.

React v15.6 et versions antérieures

Les composants React peuvent uniquement renvoyer l'expression un, mais vous essayez de renvoyer deux éléments <div>. 

N'oubliez pas que la fonction render() est exactement cela, une fonction. Les fonctions prennent toujours un certain nombre de paramètres et retournent toujours la valeur exacte un (sauf si vide).

C'est facile à oublier, mais vous écrivez en JSX et non en HTML. JSX est juste un sucre syntaxique pour javascript. Donc, un élément serait traduit par:

React.createElement('div', null, 'Hello Dear!');

Cela donne un élément React que vous pouvez renvoyer à partir de votre fonction render(), mais vous ne pouvez pas en renvoyer deux individuellement. Au lieu de cela, vous les enveloppez dans un autre élément qui a ces divs comme enfants.

De la documentation officielle :

Caveat:

Les composants doivent renvoyer un seul élément racine. C'est pourquoi nous avons ajouté un <div> pour contenir tous les éléments <Welcome />.

Essayez d’encapsuler ces composants dans un autre composant afin de ne renvoyer que un:

 //A component
    var George = React.createClass({
        render: function(){
            return (
              <div>
                <div> Hello Dear!</div>
                <div>{this.props.color}</div>
              </div>
            );
        }
    });

    ReactDOM.render(<George color="blue"/>, document.getElementById('div1'));
12
Chris

Le problème est que vous retournez plus d’un élément html de la méthode render, ici:

return (
      <div> Hello Dear!</div>
      <div>{this.props.color}</div>
);

React v16 + solution:

React 16 incluait un nouvel élément React.Fragment , grâce à cela, nous pouvons envelopper plusieurs éléments et aucun nœud dom ne sera créé pour Fragment. Comme ça:

return (
      <React.Fragment> 
            Hello Dear!
            <div>{this.props.color}</div>
      </React.Fragment>
);

ou retourner un tableau:

return ([
            <p key={0}>Hello Dear!</p>
            <div key={1}>{this.props.color}</div>
]);

Réagir v <16:

Enveloppez tous les éléments dans un div wrapper, comme ceci:

return (
      <div> 
            Hello Dear!
            <div>{this.props.color}</div>
      </div>
);

Reason: un composant React ne peut pas renvoyer plusieurs éléments, mais une seule expression JSX peut avoir plusieurs enfants. Vous ne pouvez renvoyer qu'un seul nœud. Ainsi, si vous avez une liste de divs à renvoyer, vous devez envelopper vos composants. dans un div, span ou tout autre composant.

Une dernière chose, vous devez également inclure la référence babel, utilisez cette référence dans l’en-tête:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>

Vérifiez l'exemple de travail:

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
    <!-- gap above is intended as else stackOverflow not allowing to post -->
</head>
<body>

    <div id="div1"></div>

    <script type="text/jsx">

        var George = React.createClass({
            render: function(){
                return (
                    <div> Hello Dear!
                       <div>{this.props.color}</div>
                    </div>
                );
            }
        });

        ReactDOM.render(<George color="blue"/>, document.getElementById('div1'));

    </script>
</body>
</html>

3
Mayank Shukla

Avec React 16 , nous pouvons renvoyer plusieurs composants de render sous forme de tableau (sans div parent).

return ([
    <div> Hello Dear!</div>,
    <div>{this.props.color}</div>
]);
3
Morris S

Enveloppez votre DOM de retour dans un seul élément HTML.

Essaye ça

return (
    <div>            
        <div> Hello Dear!</div>     
        <div>{this.props.color}</div>
    </div>     
);
1
Abdullah Khan
return (  <div>
                <div> Hello Dear!</div>
                <div>{this.props.color}</div>
         </div>
            );

Bonjour, les éléments à l'intérieur du retour doivent être enveloppés par quelque chose. Ajoutez juste comme montré ci-dessus et devrait fonctionner;)

1
Michal Cholewiński

La fonction de rendu ne doit renvoyer qu'un seul élément racine 

//Un composant

var George = React.createClass({
        render: function(){
            return (
                <div>
                <div> Hello Dear!</div>
                <div>{this.props.color}</div>
                </div>
            );
        }
    });
1
Isaac Osiemo

En fait, votre problème est que vous essayez de rendre plusieurs éléments en même temps, ce qui n’est pas possible dans cette version de rea,

raison la rendre est une fonction et, par nature, une fonction ne renvoie qu'une valeur

mais avec react-fibre vous pouvez faire ce que vous faites, deux solutions sont possibles pour corriger votre problème:

Soit utilisez un wrapper pour vos deux éléments

    var George = React.createClass ({
         render: function () {
           return (
                <div>
                  <div> Hello Dear! </div>
                  <div> {this.props.color} </div>
                <div>
               );
           }
    });

ReactDOM.render(<George color = "blue" />, document.getElementById ('div1'));

La deuxième solution consiste à retourner un tableau avec vos deux éléments

var George = React.createClass ({
      render: function () {
          return ([
              <div key='0'> Hello Dear! </div>,
              <div key='1'> {this.props.color} </ div>
          ]);
      }
});

ReactDOM.render (<George color = "blue" />, document.getElementById ('div1'));
1
Hajji Tarik

Incluez tout ce que vous utilisez dans l'instruction return dans une autre balise div.

render: function(){
            return (
                <div>
                    <div> Hello Dear!</div>
                    <div>{this.props.color}</div>
                </div>
            );
        }
1
Nipun Garg