So geben Sie das vorhandene reacElement von render zurück

Question

Aus der Fehlerbeschreibung, ich verstehe, dass Rendern Klassen und Zeichenfolgen aber kein bereits erstelltes Objekt zurückgeben kann. Gibt es jedoch eine Problemumgehung?

const Hello = React.createElement("div",{},"Hello"); 

var MyComp = React.createClass({ 
render:function(){ 
return(<Hello/>) 
} 
}) 

ERROR im Gegenzug: Elementtyp ist ungültig: erwartet, dass eine Saite (für eingebaute Komponenten) oder eine Klasse/Funktion (für Verbundbauteile), aber wurde: object

Answer 1

Problem umgehen, dass Sie ein div in einer Reacts-Komponente erstellen müssen und nur dann können Sie es rendern.

Wir übergeben einige Methoden in einem JavaScript-Objekt an React.createClass(), um eine neue React-Komponente zu erstellen. Die wichtigste dieser Methoden heißt rendern, die eine Baumstruktur von React-Komponenten zurückgibt, die schließlich in HTML rendern.

DOC

var Hello = React.createClass({ 
 
    render: function() { 
 
    return (
 
     React.createElement('div', {}, 
 
     "Hello, world! " 
 
    ) 
 
    ); 
 
    } 
 
}); 
 

 
var MyComp = React.createClass({ 
 
render:function(){ 
 
return(<Hello />) 
 
} 
 
}) 
 

 
ReactDOM.render(<MyComp />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script> 
 

 
<div id="app"></div>