React.DOM.p (null, message) - erklären null

Question

Wer weiß, was die null in dieser Linie ist:

React.DOM.p(null, message); 

Ich bin mir bewusst, es ist ein Convenience-Wrapper um createElement, dh

ReactElement createElement(
    string/ReactClass type, 
    [object props], 
    [children ...] 
) 

aber ich habe Mühe zu verstehen, warum die typenull ist.

Das gleiche gilt für diese Linie gehen würde hier:

React.DOM.div(null, 'Hello World!') 

Answer 1

Diese Funktionen werden gemeinhin als factories das heißt, sie sind Funktionen, die ReactElements mit einem bestimmten Typ Eigenschaft erzeugen.

Dies ist in etwa wie diese Fabriken unter der Haube erstellt:

function createFactory(type) { 
    return React.createElement.bind(null, type); 
} 

die mit this gebunden null und type gebunden, was auch immer wurde in vergangen React.createElement als gebundene Funktion gibt, Sie Stenografie Instanziierung erstellen erlaubt Funktionen für Ihre Elemente:

// create a function that creates React <div> elements 
let div = createFactory('div'); 

// create two divs using the div factory function 
let div1 = div({ /* some props */ }, 'Div 1'); 
let div2 = div({ /* some props */ }, 'Div 2'); 

bereits Reagieren kommt mit HTML-Tags built-in Fabriken für gemeinsame wie div, li usw., die Sie in Ihrer Frage haben.

---

aber ich kämpfen, um zu verstehen, warum der Typ null ist.

alle oben betrachtet, wenn Sie bei einem Ihrer Beispiele aussehen:

React.DOM.div(null, 'Hello World!') 

passiert Folgendes:

React.DOM.div nur eine Fabrik-Funktion ist, dass unter der Haube 'div' als das passiert erstes Argument zu React.createElement, das ist der Typ, und alles andere wird als die verbleibenden Argumente übergeben.

Grundidee:

// the function is created as a factory 
React.DOM.div = createFactory('div'); 

// and used to create a <div> element 
var myDiv = React.DOM.div(null, 'Hello World'); 

Dieser Wert von div als erstes Argument eingerichtet wurde auf ähnliche Art und Weise, wie ich oben gezeigt habe, wenn diese Fabrik erstellt wurde.

Daher null in Ihrem Fall ist nur die props Objekt, nicht die type. Typ ist div durch die Fabrik, props ist das erste Argument und 'Hello World!' String ist das children Argument.