Was bewirkt die „…' (Spread-Syntax) in React JSX?

Property Spread Notation in React

Was ist der Zweck der drei Punkte (...) im JSX-Code in React?

Die Punkte in diesen Fällen stellen die Eigenschaftsverteilungsnotation dar. Es wurde in ES2018 eingeführt und wird in React seit langem durch Transpilation unterstützt.

Mit der Eigenschaftsverteilungsnotation können Sie die aufzählbaren Eigenschaften eines Objekts auf die Eigenschaften eines anderen Objekts „verteilen“. Im Fall von React verteilt die {...this.props}-Syntax die Eigenschaften des Props-Objekts auf das Modal-Element.

Wenn this.props beispielsweise { a: 1, b: enthält: 2 }, der folgende Code:

<Modal {...this.props} title='Modal heading' animation={false}>

ist äquivalent zu:

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

Die Notation der Eigenschaftsverteilung ist dynamisch, das heißt schließt alle Eigenschaften ein, die zur Laufzeit im props-Objekt vorhanden sind. Dies kann nützlich sein, um mehrere Eigenschaften von übergeordneten an untergeordnete Komponenten zu übergeben, ohne jede einzelne explizit zu deklarieren.

Da untergeordnete Elemente ebenfalls eine Eigenschaft von Requisiten sind, werden sie in der Eigenschaftsverteilungsnotation einbezogen. Daher werden alle untergeordneten Elemente, die zwischen den öffnenden und schließenden Tags der übergeordneten Komponente gerendert werden, an die untergeordnete Komponente weitergegeben.

Das obige ist der detaillierte Inhalt vonWas bewirkt die „…' (Spread-Syntax) in React JSX?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!