Was machen diese drei Punkte beim Reagieren?

Was macht ... in diesem Reaktor (mit JSX) und wie heißt es?

 <Modal {...this.props} title='Modal heading' animation={false}> 
559
25 июня '15 в 14:21 2015-06-25 14:21 Thomas Johansen wird am 25. Juni 15 um 14:21 Uhr 2015-06-25 14:21 Uhr eingestellt
@ 17 Antworten

Diese Eigenschaft wird nach Notation verteilt. Es wurde in ES2018 hinzugefügt, wurde aber in React-Projekten mit Transfiguration (als "JSX-Propagierungsattribute") >

{...this.props} verteilt die "eigenen" Eigenschaften in props als separate Eigenschaften des von Ihnen erstellten Modal Elements. Wenn this.props beispielsweise a: 1 und b: 2 , dann

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

wird genau so sein

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

Aber es ist dynamisch, also sind alle "eigenen" Eigenschaften in den props enthalten.

Da children in props ihr eigenes Eigentum sind, wird es in der Verbreitung enthalten sein. Wenn also die Komponente, an der sie erscheint, über Modal verfügt, werden diese an Modal . Die Eingabe der untergeordneten Elemente zwischen dem Tag und dem schließenden Tag der öffnenden Tags ist einfach syntaktischer Zucker - eine gute Sicht -, um die child -Eigenschaft in das eröffnende Tag zu setzen. Beispiel:

 .first { color: green; } .second { color: blue; } 
 .as-console-wrapper { max-height: 100% !important; } 
661
25 июня '15 в 14:25 2015-06-25 14:25 Die Antwort wird von TJ Crowder 25. Juni 15 um 14:25 2015-06-25 14:25 gegeben

Wie Sie wissen, werden ... ihm repräsentierten Verteilungsattribute aufgerufen, sodass der Ausdruck erweitert werden kann.

 var parts = ['two', 'three']; var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"] 

Und in diesem Fall (ich werde es vereinfachen).

 //just assume we have an object like this: var person= { name: 'Alex', age: 35 } 

Das:

border=0
 <Modal {...person} title='Modal heading' animation={false} /> 

gleich

 <Modal name={person.name} age={person.age} title='Modal heading' animation={false} /> 

Kurz gesagt, dies ist ein kurzer, ordentlicher Schnitt.

225
13 янв. Antwort von Mehdi Raash am 13. Januar 2017-01-13 20:49 '17 am 20:49 Uhr 2017-01-13 20:49

Drei Punkte in Javascript ist ein Vertriebs- / Erholungsoperator .

Verteilungsoperator

Mit der Verteilungssyntax können Sie den Ausdruck an Stellen erweitern, an denen mehrere Argumente erwartet werden.

 myFunction(...iterableObj); [...iterableObj, 4, 5, 6] [...Array(10)] 

Beenden Sie die Optionen

Der rest- Syntaxparameter wird für Funktionen mit einer variablen Anzahl von Argumenten verwendet.

 function(a, b, ...theArgs) { // ... } 

Der Propagation / Rest-Operator für Arrays wurde in ES6 eingeführt. Es stellt Vorschlag 2 für Objekteigenschaften / Objekteigenschaften vor.

TypeScript unterstützt auch die Verteilungssyntax und kann sie mit kleineren Problemen in ältere Versionen von ECMAScript übersetzen.

30
09 сент. Antwort an Tomas Nikodym Sep 09 2016-09-09 17:04 '16 um 17:04 Uhr 09.09.2016 17:04 Uhr

Die drei Punkte repräsentieren den Verteilungsoperator in ES6. Dies erlaubt uns einige Dinge in Javascript zu tun:

  1. Array kopieren

     var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil' ]; var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout']; var games = [...shooterGames, ...racingGames]; console.log(games) // ['Call of Duty', 'Far Cry', 'Resident Evil', 'Need For Speed', 'Gran Turismo', 'Burnout'] 
  2. Zerstöre ein Array

      var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil' ]; var [first, ...remaining] = shooterGames; console.log(first); //Call of Duty console.log(remaining); //['Far Cry', 'Resident Evil'] 
  3. Funktionsargumente als Array

      function fun1(...params) { } 

Das obige ist als die restlichen Parameter bekannt und begrenzt nicht die Anzahl der Werte, die an die Funktion übergeben werden. Die Argumente müssen jedoch vom selben Typ sein.

  1. Zwei Objekte kämmen

     var myCrush = { firstname: 'Selena', middlename: 'Marie' }; var lastname = 'my last name'; var myWife = { ...myCrush, lastname } console.log(myWife); // {firstname: 'Selena', // middlename: 'Marie', // lastname: 'my last name'} 
25
06 июня '18 в 23:28 2018-06-06 23:28 Die Antwort wird von theTypan am 6. Juni 18 um 23:28 Uhr 2018-06-06 23:28 gegeben

Dies ist eine es6-Funktion, die auch in React verwendet wird. Siehe das Beispiel unten:

 function Sum(x,y,z) { return x + y + z; } console.log(Sum(1,2,3)); //6 

Diese Methode ist gut, wenn wir maximal 3 Parameter haben, aber was ist, wenn wir zum Beispiel 110 Parameter hinzufügen müssen. Sollten wir sie alle definieren und nacheinander hinzufügen?! Natürlich gibt es dazu einen einfacheren Weg, den sogenannten SPREAD. Anstatt alle diese Parameter zu übergeben, schreiben Sie:

 function (...numbers){} 

Wir wissen nicht, wie viele Parameter wir haben, aber wir wissen, dass es viele davon gibt. Basierend auf es6 können wir die obige Funktion wie unten beschrieben neu schreiben und die Vielfalt und Übereinstimmung zwischen ihnen verwenden, um sie so einfach wie ein Kinderspiel zu machen:

 let Sum = (...numbers) => { return numbers.reduce((prev, current) => prev + current ); } console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9));//45 
24
27 февр. Die Antwort wird Negin 27 Februar gegeben . 2017-02-27 15:52 '17 am 15:52 2017-02-27 15:52

Es ist nur die Definition von Requisiten in JSX für Sie anders!

Es verwendet ... Array und einen Objektoperator in ES6 (das Objekt wird noch nicht vollständig unterstützt). Wenn Sie also Ihre Details bereits definiert haben, können Sie sie auf diese Weise an Ihr Element weitergeben.

In Ihrem Fall sollte der Code also so aussehen:

 function yourA() { const props = {name='Alireza', age='35'}; <Modal {...props} title='Modal heading' animation={false} /> } 

Daher sind die von Ihnen definierten Details nun getrennt und können bei Bedarf wiederverwendet werden.

Das ist gleich:

 function yourA() { <Modal name='Alireza' age='35' title='Modal heading' animation={false} /> } 

Hier sind Zitate vom React-Team zum Verteilungsoperator in JSX:

JSX-Verteilungsattribute Wenn Sie alle Eigenschaften, die Sie in eine Komponente einfügen möchten, im Voraus kennen, ist JSX einfach zu verwenden:

 var component = <Component foo={x} bar={y} />; 

Mutationsrequisiten sind schlecht
Wenn Sie nicht wissen, welche Eigenschaften Sie festlegen möchten, können Sie sie später dem Objekt hinzufügen:

 var component = <Component />; component.props.foo = x; // bad component.props.bar = y; // also bad 

Dies ist ein Anti-Pattern, da wir damit nicht später helfen können, die richtigen Eigenschaften zu testen. Dies bedeutet, dass Ihre propTypes-Fehler in einer mysteriösen Stapelverfolgung enden.

Requisiten sollten als unverändert betrachtet werden. Eine Mutation des Requisitenobjekts an einem anderen Ort kann zu unbeabsichtigten Folgen führen. Idealerweise wird es zu diesem Zeitpunkt ein eingefrorenes Objekt sein.

Verteilungsattribute
Jetzt können Sie die neue JSX-Funktion verwenden, die als Verteilungsattribute bezeichnet wird:

 var props = {}; props.foo = x; props.bar = y; var component = <Component {...props} />; 

Die Eigenschaften des Objekts, das Sie übergeben, werden in die Sicherungen der Komponente kopiert.

Sie können es mehrmals verwenden oder mit anderen Attributen kombinieren. Die Reihenfolge der Spezifikation ist wichtig. Spätere Attribute überschreiben vorherige.

 var props = { foo: 'default' }; var component = <Component {...props} foo={'override'} />; console.log(component.props.foo); // 'override' 

Was für eine seltsame Platte?
Operator ... (oder Verteilungsoperator) wird in ES6 bereits für Arrays unterstützt. Es gibt auch einen ECMAScript-Vorschlag für Rest- und Objektausbreitungseigenschaften. Wir verwenden diese unterstützten und entwickelten Standards, um eine sauberere Syntax in JSX bereitzustellen.

11
27 мая '17 в 9:06 2017-05-27 09:06 Die Antwort wird von Alireza am 27. Mai 17 um 09:06 2017-05-27 09:06 gegeben

Für diejenigen, die aus der Welt von Python stammen, entsprechen die Attribute von Spread JSX Entpack-Argumentlisten (Python ** -operator).

Ich weiß, dass dies eine JSX-Frage ist, aber die Arbeit mit Analoga beschleunigt manchmal die Arbeit.

11
15 мая '17 в 11:27 2017-05-15 11:27 Antwort von Andre Miras am 15. Mai 17 um 11:27 2017-05-15 11:27

... (Ausbreitungsoperator) wird verwendet als Antwort auf:

bieten eine bequeme Möglichkeit, Requisiten von übergeordneten Komponenten an Kinder zu übertragen. B. diese Details in der übergeordneten Komponente gegeben,

 this.props = { username: "danM", email: "dan@mail.com" } 

Sie können dem Kind wie folgt übermittelt werden,

 <ChildComponent {...this.props} /> 

wie sieht es aus

 <ChildComponent username={this.props.username} email={this.props.email} /> 

aber der Weg ist sauberer.

8
22 дек. die antwort ist gegeben daniel maina 22 dez. 2017-12-22 19:04 '17 am 19:04 2017-12-22 19:04

Die drei Punkte (...) werden als Spreading-Operator bezeichnet. Sie ähneln konzeptionell dem ES6-, JSX-Distributionsoperator, der diese unterstützten und entwickelten Standards verwendet, um eine sauberere Syntax in JSX bereitzustellen

Verbreitungseigenschaften in Objektinitialisierern kopieren ihre eigenen aufgezählten Eigenschaften aus dem bereitgestellten Objekt in das neu erstellte Objekt.

 let n = { x, y, ...z }; n; // { x: 1, y: 2, a: 3, b: 4 } 

Referenz:

1) https://github.com/sebmarkbage/ecmascript-rest-spread#spread-properties

2) https://facebook.github.io/react/docs/jsx-spread.html

3
24 сент. Antwort von Ramesh Kumar Thiyagarajan am 24. Sep. 2016-09-24 16:28 '16 am 16:28 2016-09-24 16:28

Kurz gesagt, drei Punkte ... Dies ist der Ausbreitungsoperator in ES6 (ES2015). Der Verteiler erhält alle Daten.

 let a = [1, 2, 3, 4]; let b = [...a, 4, 5, 6]; let c = [7,8,...a]; 

console.log (b); geben das Ergebnis [1,2,3,4,5,6]

console.log (s); geben Sie das Ergebnis [7,8,1,2,3,4]

2
02 февр. Die Antwort wird von Sikindar Mirza 02 Feb. gegeben. 2018-02-02 08:27 18 um 20:27 Uhr 2018-02-02 08:27

Normalerweise als Verteilungsoperator bezeichnet, wird er dort verwendet, wo er benötigt wird.

ein Beispiel

 const SomeStyle = { margin:10, background:#somehexa } 

Sie können es überall dort einsetzen, wo Sie jemals brauchen, mehr über den Verteilungsoperator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

1
31 окт. die antwort ist keerthi c 31 oct. 2018-10-31 08:10 '18 um 8:10 ; 2018-10-31 08:10

Üblicherweise werden Informationen in einer React-Anwendung übertragen. In diesem Fall können wir Statusänderungen auf die untergeordnete Komponente anwenden, unabhängig davon, ob sie sauber oder unrein ist (zustandslos oder zustandsbehaftet). Es gibt Momente, in denen der beste Ansatz beim Übergang zu den Requisiten die Übertragung einzelner Eigenschaften oder der gesamten Objekteigenschaften ist. Mit Unterstützung von Arrays in ES6 erhielten wir die Bezeichnung "...", und nun können wir die Übertragung des gesamten Objekts auf das Kind erreichen.

Der typische Prozess der Übergabe einer Requisite an ein Kind ist mit der folgenden Syntax gekennzeichnet:

 var component = <Component foo={x} bar={y} />; 

Dies ist gut zu verwenden, wenn die Anzahl der Requisiten minimal ist, aber unüberschaubar wird, wenn die Anzahl der Requisiten zu groß wird. Das Problem bei dieser Methode tritt auf, wenn Sie die in der untergeordneten Komponente erforderlichen Eigenschaften nicht kennen und eine typische JavaScript-Methode diese Eigenschaften einfach setzt und dann an das Objekt bindet. Dies führt zu Problemen mit der PropType-Prüfung und mysteriösen Stack-Trace-Fehlern, die nutzlos sind und Verzögerungen beim Debuggen verursachen. Das Folgende ist ein Beispiel für diese Praxis und was sollte nicht getan werden:

 var component = <Component />; component.props.foo = x; // bad component.props.bar = y; 

Das gleiche Ergebnis kann erzielt werden, jedoch mit angemessenem Erfolg:

 var props = {}; props.foo = x; props.bar = y; var component = Component(props); // Where did my JSX go? 

Es wird jedoch keine JSX-Propagierung oder JSX verwendet. Um zur Gleichung zurückzukehren, können wir nun Folgendes tun:

 var props = {}; props.foo = x; props.bar = y; var component = <Component {...props} />; 

Eigenschaften enthalten in "... Requisiten": foo: x, bar: y. Sie kann mit anderen Attributen kombiniert werden, um die Eigenschaften "... props" mit dieser Syntax zu überschreiben:

 var props = { foo: 'default' }; var component = <Component {...props} foo={'override'} />; console.log(component.props.foo); // 'override' 

Darüber hinaus können wir andere Eigenschaftsobjekte aufeinander kopieren oder wie folgt kombinieren:

 var oldObj = { foo: 'hello', bar: 'world' }; var newObj = { ...oldObj, foo: 'hi' }; console.log(newObj.foo); // 'hi'; console.log(newObj.bar); // 'world'; 

Oder kombinieren Sie zwei verschiedene Objekte wie folgt (dies ist noch nicht in allen Versionen der Reaktion verfügbar):

 var ab = { ...a, ...b }; // merge(a, b) 

Eine andere Möglichkeit, dies gemäß der Facebook-Reaktions- / Dokumentationsseite zu erklären:

Wenn Sie bereits "Requisiten" als Objekt haben und diese nach JSX übertragen möchten, können Sie "..." als SPREAD-Operator verwenden, um das gesamte Objekt "Requisiten" zu übertragen. Die folgenden zwei Beispiele sind gleichwertig:

 function App1() { return <Greeting firstName="Ben" lastName="Hector" />; } function App2() { const props = {firstName: 'Ben', lastName: 'Hector'}; return <Greeting {...props} />; } 

Verteilungsattribute können beim Erstellen von generischen Containern hilfreich sein. Sie können jedoch auch Ihren Code unregelmäßig machen, wodurch die Übertragung unnötiger Details an Komponenten, die sich nicht damit beschäftigen, vereinfacht wird. Diese Syntax sollte mit Vorsicht verwendet werden.

0
25 сент. Antwort von esewalson 25. September 2018-09-25 21:43 '18 um 21:43 2018-09-25 21:43

Spread-Attribute zum einfachen Übertragen mehrerer Eigenschaften

{... this.props} enthält die Eigenschaft this.props

Verwenden des Verteilungsoperators {...} mit unteren Unterstützungen

 this.props = { firstName: 'Dan', lastName: 'Abramov', city: 'New York', country: 'USA' } 

Ohne {...} verbreiten

 <Child firstName={this.props.firstName} lastName={this.props.lastName} city={this.props.city} country={this.props.country} > 

Mit {...} verbreiten

 <Child { ...this.props } /> 

Twitter Dana Abramova über den Verteilungsoperator (Ersteller von Redux) https://tube.com/dan_abramov/status/694519379191545856?>

07 нояб. Die Antwort wird von Gopinath Kaliappan 07 Nov. gegeben. 2017-11-07 19:17 '17 um 19:17 Uhr 2017-11-07 19:17

Dies wird als Javascript-Spread-Syntax bezeichnet.

Es wird verwendet, um ein Array oder ein Objekt in JavaScript zu zerstören.

Beispiel:

 const objA = { a: 1, b: 2, c: 3 } const objB = { ...objA, d: 1 }  console.log(objB) const objC = { ....objA, a: 3 }  console.log(objC) 

Dasselbe können Sie mit der Object.assign() Funktion der Object.assign() Funktion in Javascript Object.assign() .

Referenz:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

-1
20 сент. Die Antwort ist Nontachai 20 Sep. gegeben. 2018-09-20 05:53 '18 um 5:53 2018-09-20 05:53

In Ihrem speziellen Beispiel überträgt der Operator mit der Erweiterung alles in das Objekt der Requisiten.

Ich fand diese Website sehr nützlich, wenn ich mit einer Antwort beginne : https://zhenyong.github.io/react/docs/jsx-spread.html

-1
17 нояб. Die Antwort gibt Noorulain Khaliq am 17. November. 2017-11-17 05:47 '17 am 5:47 2017-11-17 05:47

Dies ist eine neue Funktion in ES6 / Harmony. Dies wird als Verteilungsoperator bezeichnet. Sie können entweder die Komponenten des Arrays / Objekts trennen oder mehrere Elemente / Parameter übernehmen und miteinander verkleben. Hier ist ein Beispiel:

 let array = [1,2,3] let array2 = [...array] // array2 is now filled with the items from array 

Und mit dem Objekt / Schlüssel:

 // lets pass an object as props to a react component let myParameters = {myKey: 5, myOtherKey: 7} let component = <MyComponent {...myParameters}/> // this is equal to <MyComponent myKey=5 myOtherKey=7 /> 

Was wirklich cool ist, ist, dass Sie es verwenden können, um "andere Werte" zu bedeuten.

 const myFunc = (value1, value2, ...values) { // Some code } myFunc(1, 2, 3, 4, 5) // when myFunc is called, the rest of the variables are placed into the "values" array 
-1
07 июля '17 в 20:17 2017-07-07 20:17 Die Antwort wird von Christophe Pouliot am 7. Juli 17 um 20:17 2017-07-07 20:17 gegeben

Sie werden Spreads genannt. Wie der Name schon sagt. Dies bedeutet, dass ein beliebiger Wert in dieses Array oder diese Objekte eingefügt wird.

Zum Beispiel:

 let a = [1, 2, 3]; let b = [...a, 4, 5, 6]; console.log(b); > [1, 2, 3, 4, 5, 6] 
-3
10 июля '17 в 11:45 2017-07-10 11:45 Die Antwort wird von nichery 10. Juli 17 um 11:45 2017-07-10 11:45 gegeben