Wie funktioniert dieses Reaction-Beispiel?

Question

Ich bin derzeit versucht, Reagieren zu lernen, und vielleicht bin ich nur schläfrig und etwas fehlt, aber ich muss fragen:

In diesem Codebeispiel (aus der Reaktion Seiten „Getting Started“), warum „World ist "gedruckt? Von was ich sehen kann, wo this.props.name übergeben wird, sucht die Funktion nach Kindern, keine zusätzliche Texteingabe abholen. So interpretiere ich zumindest die Dokumentation re: react.createElement.

Dieser Code ist "wie vorgesehen", Drucken "Hallo Welt" ... aber kann mir jemand genau sagen warum es funktioniert? Ich würde erwarten, nur "Hallo" zu sehen, und vielleicht wird ein Konsolenfehler über "Welt" nicht definiert. Zu wem auch immer antwortet, danke im Voraus für Ihre Erklärung. ;)

var Hello = React.createClass({ 
displayName: 'Hello', 
render: function() { 
    return React.createElement("div", null, "Hello ", this.props.name); 
} 
}); 

ReactDOM.render(
React.createElement(Hello, { name: "World"}), 
container 
); 

Answer 1

Die React.createElement Funktion der Art des Elements nimmt zu erstellt werden (wenn eine Zeichenfolge übergeben wird, ist es ein HTML-Elementname, aber es kann auch ein Re sein ference zu einem ReactClass), dann ein props Objekt, dann eine unbestimmte Anzahl von Kindern als die folgenden Argumente.

Wenn Sie rufen

React.createElement(Hello, { name: "World"}) 

Sie Hello als Reaktion Klasse sind vorbei instanziiert werden und ein Objekt { name: "World"} als props, die dann als this.props in allen Methoden der Hello zur Verfügung, einschließlich der render Verfahren .

Dann wird die Hello Element (Klasse) ruft createElement wieder:

React.createElement("div", null, "Hello ", this.props.name) 

hier "div" die Art von HTML-Elemente erstellt werden soll, props null sind, und beide "Hello " und this.props.name sind Kinder geschaffen werden, In diesem Beispiel einfache Strings, wobei der erste eine literale Zeichenfolge ist, der zweite eine Referenz auf einen Schlüssel in dem oben übergebenen Objekt props.

Was Sie wahrscheinlich verpasst haben ist, dass Sie eine beliebige Anzahl von Argumenten an die createElement-Methode übergeben können und alle Argumente, die mit der 3. beginnen, werden als Geschwisterelemente gerendert.

Answer 2

Wie Sie sehen können, innerhalb der Funktion macht, gibt es einen zusätzlichen Parameter in die Funktion createElement geben.

Erster Parameter ist die Komponentenklasse, die Sie instanziieren möchten, und zweitens sind die Requisiten. Hier haben wir eine name prop definiert mit einem Wert von "World".

Da die Komponente Hello die Requisite namens name aufnimmt, wird sie zusammen mit der "Hello ", die die Komponente enthalten soll, wiedergegeben. Es ist ein einfaches div Element.

Here you can see Die Parameter, die für die Funktion createElement, die von React verfügbar gemacht wird, definiert und erläutert wurden.

Nämlich:

React.createElement("div", null, "Hello ", this.props.name);

Elementtyp - div
Props - null
Zwei Kinder - "Hello " und this.props.name (die "World" ist)