it-swarm.com.de

Fehler: Benachbarte JSX-Elemente müssen in ein einschließendes Tag eingeschlossen werden

Ich versuche, Requisiten einer reagierenden Komponente zu drucken, bekomme aber einen Fehler. Bitte helfen Sie: 

Ausschnitt:  

<!-- 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>

Ich erwarte "Hallo Lieber!" und dann nächste Zeile "blau". Aber ich bekomme stattdessen diesen Fehler.

Fehler:

 enter image description here

6
Deadpool

Reagiere ab Version 16

Ab React v16 React Komponenten können ein Array zurückgeben. Dies war vor v16 nicht möglich.

Dies zu tun ist einfach:

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

Beachten Sie, dass Sie für jedes Element des Arrays einen Schlüssel deklarieren müssen. Offiziellen Quellen zufolge wird diesmöglicherweisein zukünftigen Versionen von React unnötig, aber nicht ab sofort. Vergessen Sie auch nicht, jedes Element im Array mit , Zu trennen, wie Sie es normalerweise mit einem Array tun würden.

Reagieren Sie mit v15.6 und früher

React Components kann nuroneexpression zurückgeben, Sie versuchen jedoch, zwei <div> - Elemente zurückzugeben.

Vergiss nicht, dass die render() -Funktion genau das ist, eine Funktion. Funktionen nehmen immer eine Reihe von Parametern auf und geben immer genauonevalue zurück (außer void).

Es ist leicht zu vergessen, aber Sie schreiben JSX und nicht HTML. JSX ist nur ein syntaktischer Zucker für Javascript. Ein Element würde also übersetzt werden als:

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

Dies ergibt ein React Element, das Sie von Ihrer render() Funktion zurückgeben können, aber Sie können nicht zwei einzeln zurückgeben, sondern Sie wickeln sie in ein anderes Element ein, das diese divs als Kinder.

Aus den offiziellen Dokumenten :

Einschränkung:

Komponenten müssen ein einzelnes Stammelement zurückgeben. Aus diesem Grund haben wir ein <div> Hinzugefügt, das alle <Welcome /> - Elemente enthält.


Versuchen Sie, diese Komponenten in eine andere Komponente zu packen, sodass Sie nuronezurückgeben:

 //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

Das Problem ist, dass Sie mehr als ein HTML-Element von der Rendermethode zurückgeben, hier:

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

Reagiere v16 + Lösung:

React 16 enthielt ein neues Element React.Fragment , mit dessen Hilfe wir mehrere Elemente umbrechen können, und es wird kein Dom-Knoten für Fragment erstellt. So was:

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

oder ein Array zurückgeben:

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

Reagiere v <16:

Wickeln Sie alle Elemente wie folgt in ein Wrapper-Div ein:

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

Grund : Eine React-Komponente kann nicht mehrere Elemente zurückgeben, aber ein einzelner JSX-Ausdruck kann mehrere untergeordnete Elemente haben. Sie können nur einen Knoten zurückgeben. Wenn Sie also eine Liste mit divs zurückgeben müssen, müssen Sie umbrechen Ihre Komponenten innerhalb eines Div, Span oder einer anderen Komponente.

Eine weitere Sache, Sie müssen auch die Referenz von Babel einfügen, verwenden Sie diese Referenz in der Kopfzeile:

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

Überprüfen Sie das Arbeitsbeispiel:

<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

Mit React 16 können wir mehrere Komponenten von render als Array (ohne übergeordnetes div) zurückgeben.

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

Wickeln Sie das zurückgegebene DOM in ein einzelnes HTML-Element ein.

Versuche dies

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>
            );

Hallo, Elemente in return sollten von etwas eingepackt werden. Füge einfach wie oben gezeigt hinzu und sollte funktionieren;)

1

Die Renderfunktion sollte nur ein Wurzelelement zurückgeben, versuchen Sie dies 

//Eine Komponente

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

In der Tat besteht Ihr Problem darin, dass Sie versuchen, mehrere Elemente gleichzeitig zu rendern, was in dieser Version von Rea nicht möglich ist.

reason render ist eine Funktion und eine Funktion gibt von Natur aus nur einen Wert zurück

aber mit reag-fiber können Sie tun, was Sie tun, um Ihr Problem zu beheben, gibt es zwei Lösungen:

Entweder verwende einen Wrapper für beide Elemente

    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'));

Die zweite Lösung besteht darin, ein Array mit beiden Elementen zurückzugeben

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

Schließen Sie alles, was Sie in der return-Anweisung verwenden, in ein anderes div-Tag ein.

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