2017-05-05 6 views
3

Ich lerne über einen Online-Kurs reagieren und haben auf eine Situation gestoßen, wo eine Eigenschaft auf eine andere Eigenschaft wie so angebracht ist:React.js: Requisiten an Requisiten übergeben?

this.props.property01(this.props.property02) 

als Tutor sehen nur kurz adressiert diese Codezeile kann ich nicht, aber bleiben ratlos Woran diese "Verkettungssyntax" tatsächlich steht, dh was sie hinter den Kulissen bewirkt. Von Vanilla JS kommend sieht es so aus, als ob property02 als Argument für property01 verwendet wird, aber das scheint eine zu einfache Antwort zu sein. Davon abgesehen verstehe ich den verbleibenden Code ziemlich gut.

etwas Kontext Um ich dieses codepen geschaffen haben, in dem das Problem, das ich oben beziehen, die durch this.props.onDelete(this.props.whichItem); gegeben.

Da ich nicht alle damit verbundenen Fragen finden, konnte ich für einige interessante Ausführungen zu diesem dankbar sein würde.

+0

Yep. Es sieht so aus als wäre 'property2' ein Argument von' property1' warum nicht? Solange Sie Funktion als Requisiten wie diese senden können this.deleteItem} /> ' P.S. Bind vermeiden beim Passieren von Props https://daveceddia.com/avoid-bind-when-passing-props/ –

Antwort

2

Die Eigenschaften eines React Komponente können Funktionen sein. Wenn ich sehe:

this.props.property01(this.props.property02) 

denke ich, dass:

  • this.props.property01 eine Funktion ist.
  • this.props.property02 ist an die Funktion als ein Argument übergeben. Diese

bedeutet, dass die Komponente würde wie verwendet werden:

<SomeComponent property01={(a) => { /* so something with "a" ... */ } property02={"someValue"} /> 

Wenn property02 nur verwendet werden, um weitergegeben zu property01 und nichts anderes würde ich es vorziehen, so etwas wie:

<SomeComponent property01={(a) => { /* do something with "someValue" ... */ } /> 

Welche bedeutet, dass keine Eigenschaft namens poperty02 erforderlich ist.

+0

Vielen Dank! Das hilft wirklich :) – gnzg

1

Von Vanille JS sieht es aus wie property02 für property01 als Argument verwendet wird

Das ist es, Sie sind richtig.

this.props.property01 (this.props.property02)

property01 ist ein Verfahren, property02, das Argument.

Eine aufwendigere Erklärung für alle anderen Blick auf diese:

Angenommen, diese Zeile ist in einer Komponente MyComponent und property01 genannt ist eine Stütze in MyComponent.

Die Render-Mutterkomponente() -Methode, würde wie folgt enthalten:

<MyComponent property01={this.someMethod.bind(this)} /> 

Wo someMethod gehört zu jener übergeordneten Komponente, aber es wird als property01 in MyComponent (die Kind-Komponente) zur Verfügung.

Verwandte Themen