web-dev-qa-db-de.com

Was machen diese drei Punkte in React?

Was macht der ... in diesem React-Code (unter Verwendung von JSX) und wie heißt er?

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

Das ist Eigenschaftsverbreitungsnotation . Es wurde in ES2018 hinzugefügt, aber in React-Projekten lange Zeit durch Transpilierung unterstützt (als "JSX-Spread-Attribute", obwohl Sie es auch anderswo tun könnten, nicht nur Attribute).

{...this.props} verbreitet sich die "eigenen" Eigenschaften in props als diskrete Eigenschaften für das von Ihnen erstellte Modal-Element. Wenn beispielsweise this.propsa: 1 und b: 2 enthält, dann

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

wäre das Gleiche wie

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

Aber es ist dynamisch, also werden alle "eigenen" Eigenschaften in props eingeschlossen.

Da children eine "eigene" Eigenschaft in props ist, wird sie von Spread eingeschlossen. Wenn die Komponente, in der dies angezeigt wird, über untergeordnete Elemente verfügt, werden diese an Modal übergeben. Das Einfügen von untergeordneten Elementen zwischen dem öffnenden Tag und dem schließenden Tag ist lediglich syntaktischer Zucker - die gute Art -, um eine children-Eigenschaft im öffnenden Tag zu setzen. Beispiel:

class Example extends React.Component {
  render() {
    const { className, children } = this.props;
    return (
      <div className={className}>
      {children}
      </div>
    );
  }
}
ReactDOM.render(
  [
    <Example className="first">
      <span>Child in first</span>
    </Example>,
    <Example className="second" children={<span>Child in second</span>} />
  ],
  document.getElementById("root")
);
.first {
  color: green;
}
.second {
  color: blue;
}
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Spread-Notation ist nicht nur für diesen Anwendungsfall hilfreich, sondern auch für das Erstellen eines neuen Objekts mit den meisten (oder allen) Eigenschaften eines vorhandenen Objekts. Dies ist bei der Aktualisierung des Status sehr wichtig, da Sie den Status nicht ändern können direkt:

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

Dadurch wird this.state.foo durch ein neues Objekt mit denselben Eigenschaften wie foo ersetzt, mit Ausnahme der a-Eigenschaft, die zu "updated" wird:

const obj = {
  foo: {
    a: 1,
    b: 2,
    c: 3
  }
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);
.as-console-wrapper {
  max-height: 100% !important;
}

685
T.J. Crowder

Wie Sie wissen, heißen ...Spread Attributes, dessen Name den Namen repräsentiert, damit ein 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 
}

Diese:

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

entspricht

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

Kurz gesagt, es ist eine Abkürzung ordentlich, wir können sagen.

229
Mehdi Raash

Die drei Punkte in JavaScript sind spread/rest-Operator

Spread-Operator

Die spread-Syntax ermöglicht die Erweiterung eines Ausdrucks an Stellen, an denen mehrere Argumente erwartet werden.

myFunction(...iterableObj);

[...iterableObj, 4, 5, 6]

[...Array(10)]

Restparameter

Die rest Parametersyntax wird für Funktionen mit variabler Anzahl von Argumenten verwendet. 

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

Der Spread/Rest-Operator für Arrays wurde in ES6 eingeführt. Es gibt einen Status 2 Vorschlag für Objekteigenschaften.

TypeScript unterstützt auch die Spread-Syntax und kann diese mit kleineren Problemen in ältere Versionen von ECMAScript umwandeln. 

33
Tomas Nikodym

Die drei Punkte repräsentieren den Spread Operator in ES6. Es erlaubt uns einige Dinge in Javascript zu tun:

  1. Kopieren eines Arrays  

    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örung eines Arrays  

      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 Restparameter bekannt und beschränkt die Anzahl der an eine Funktion übergebenen Werte nicht. Die Argumente müssen jedoch vom selben Typ sein.

  1. Zwei Objekte kombinieren

    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'}
    
29
theTypan

Dies ist eine Funktion von es6, die auch in React verwendet wird. Schauen Sie sich das Beispiel unten an:

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

Dieser Weg ist gut, wenn wir maximal 3 Parameter haben, aber was ist, wenn wir beispielsweise 110 Parameter hinzufügen müssen. Sollten wir sie alle definieren und nacheinander hinzufügen?! Natürlich gibt es eine einfachere Methode, die als SPREAD ..__ bezeichnet wird. Statt alle Parameter zu übergeben, die Sie schreiben:

function (...numbers){} 

Wir haben keine Ahnung, wie viele Parameter wir haben, aber wir wissen, dass es eine Menge davon gibt ..__ Basierend auf es6 können wir die obige Funktion wie folgt umschreiben und die Verteilung und Zuordnung zwischen ihnen verwenden, um es 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
Negin

Es definiert nur Requisiten auf andere Weise inJSXfür Sie! 

Es verwendet ... array und object operator in ES6 (Objekt eins wird noch nicht vollständig unterstützt). Wenn Sie also bereits Ihre Requisiten definieren, können Sie sie auf diese Weise Ihrem Element übergeben. 

In Ihrem Fall sollte der Code also etwa so aussehen:

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

die von Ihnen definierten Requisiten werden nun getrennt und können bei Bedarf wiederverwendet werden.

Es ist gleich:

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

Dies sind die Zitate des React-Teams zum Spread-Operator in JSX:

JSX-Spread-Attribute Wenn Sie alle Eigenschaften kennen, die Sie in einer Komponente platzieren möchten Vor der Zeit ist es einfach, JSX zu verwenden:

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

Mutieren von Requisiten ist schlecht
Wenn Sie nicht wissen, welche Eigenschaften Sie festlegen möchten, werden Sie möglicherweise versucht, sie später dem Objekt hinzuzufügen:

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

Dies ist ein Anti-Pattern, da wir Ihnen nicht bei der Überprüfung von .__ helfen können. die richtigen Eigenschaften bis weit später. Dies bedeutet, dass Ihre Eigenschaften Fehler enden mit einem kryptischen Stack-Trace.

Die Requisiten sollten als unveränderlich betrachtet werden. Verändern des Requisitenobjekts anderswo könnte unerwartete Folgen haben, so dass es im Idealfall an diesem Punkt ein gefrorenes Objekt sein.

Spread-Attribute
Jetzt können Sie eine neue Funktion von JSX verwenden, die als Spread-Attribute bezeichnet wird:

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

Die Eigenschaften des übergebenen Objekts werden in die .__ kopiert. Requisiten der Komponente.

Sie können dies mehrfach verwenden oder mit anderen Attributen kombinieren. Die Spezifikationsreihenfolge ist wichtig. Spätere Attribute überschreiben die vorherigen.

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

Was ist mit der komischen ... Notation?
Der Operator ... (oder Spread-Operator) wird in ES6 bereits für Arrays unterstützt. Es gibt auch ein ECMAScript-Vorschlag für die Eigenschaften "Objektruhe" und "Verbreitung". Wurden Nutzung dieser unterstützten und sich entwickelnden Standards in der Reihenfolge um eine sauberere Syntax in JSX bereitzustellen.

11
Alireza

Für diejenigen, die aus der Python-Welt stammen, sind die JSX-Spread-Attribute äquivalent zu: _. Entpacken von Argumentlisten (der Python-Operator **-).

Ich bin mir bewusst, dass dies eine JSX-Frage ist, aber das Arbeiten mit Analogien hilft manchmal, es schneller zu machen.

11
Andre Miras

Der ... (Spread-Operator) wird verwendet, um zu reagieren auf:

bieten eine saubere Möglichkeit, Requisiten von übergeordneten an untergeordnete Komponenten zu übergeben B. diese Stützen in einer übergeordneten Komponente gegeben,

this.props = {
  username: "danM",
  email: "[email protected]"
}

sie könnten auf folgende Weise an das Kind weitergegeben werden,

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

was ähnlich ist

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

aber viel sauberer.

8
daniel maina

Die drei Punkte (...) werden als Spread-Operator bezeichnet. Dies ist konzeptionell ähnlich wie der ES6-Array-Spread-Operator JSX, der diese unterstützten und entwickelten Standards nutzt, um eine sauberere Syntax in JSX bereitzustellen

Verbreitungseigenschaften in Objektinitialisierern kopiert eigene Aufzählungszeichen Eigenschaften von einem bereitgestellten Objekt auf 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

Drei Punkte ... stehen für Spread-Operatoren oder Rest-Parameter ,

Hiermit kann ein Array-Ausdruck oder eine Zeichenfolge oder alles, was iterierend sein kann, an Stellen erweitert werden, an denen null oder mehr Argumente für Funktionsaufrufe oder Elemente für Arrays erwartet werden.

  • Zwei Arrays zusammenführen
var arr1 = [1,2,3];
var arr2 = [4,5,6];

arr1 = [...arr1, ...arr2];
console.log(arr1);  //[1, 2, 3, 4, 5, 6]
  • Array kopieren:
var arr = [1, 2, 3];
var arr2 = [...arr];

console.log(arr); //[1, 2, 3]

Hinweis: Die Spread-Syntax geht beim Kopieren eines Arrays effektiv eine Ebene tiefer. Aus diesem Grund ist es möglicherweise nicht zum Kopieren von mehrdimensionalen Arrays geeignet, wie im folgenden Beispiel gezeigt (dasselbe gilt für Object.assign () und Spread-Syntax).

  • Addiere Werte eines Arrays zu einem anderen bei einem bestimmten Index, z. B. 3:
var arr1 = [4,5]
var arr2 = [1,2,3,...arr1,6]
console.log(arr2);      // [1, 2, 3, 4, 5, 6]
  • Beim Aufruf eines Konstruktors mit new:
var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);

console.log(d);
  • In Objektliteralen verteilt:
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
console.log(clonedObj); //{foo: "bar", x: 42}

var mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); //{foo: "baz", x: 42, y: 13}

Beachten Sie, dass die Eigenschaft foo von obj1 durch die Eigenschaft foo von obj2 überschrieben wurde

  • Als Restparametersyntax, mit der wir eine unbestimmte Anzahl von Argumenten als Array darstellen können:
function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));      //6
console.log(sum(1, 2, 3, 4));   //10

Hinweis: Die Spread-Syntax (anders als im Fall von Spread-Eigenschaften) kann nur auf iterierbare Objekte angewendet werden: Folgendes wird also einen Fehler auslösen

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable

Referenz1

Referenz2

2
Code_Mode

Kurz gesagt, die drei Punkte ... sind in ES6 (ES2015) ein Spread-Operator. Der Spread-Operator holt alle Daten ab.

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 (c); gibt das Ergebnis [7,8,1,2,3,4]

2
Sikindar Mirza

Wird in der Regel als Spread-Operator bezeichnet. Er wird überall dort verwendet, wo er benötigt wird

beispiel 

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

sie können dies verwenden, wo immer Sie es benötigen Weitere Informationen zum Spread Operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

1
keerthi c

Es heißt Spread Operator . Für zB Let hallo = {name: '', msg: ''} Let hallo1 = {... hello} Nun werden hallo Objekteigenschaften in hallo1 kopiert .

0
Kaushal Regmi

Es ist üblich, Requisiten in einer React-Anwendung herumzugeben. Auf diese Weise können wir Statusänderungen auf die untergeordnete Komponente anwenden, unabhängig davon, ob sie rein oder unrein ist (zustandslos oder zustandsbehaftet). Es gibt Zeiten, in denen der beste Ansatz beim Übergeben von Requisiten darin besteht, einzelne Eigenschaften oder ein gesamtes Objekt mit Eigenschaften zu übergeben. Mit der Unterstützung für Arrays in ES6 erhielten wir die Notation "..." und damit können wir nun ein ganzes Objekt an ein Kind übergeben. 

Der typische Prozess der Weitergabe von Requisiten an ein Kind wird mit dieser Syntax festgestellt:

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

Dies ist in Ordnung, wenn die Anzahl der Requisiten minimal ist, aber unüberschaubar wird, wenn die Anzahl der Requisiten zu hoch wird. Ein Problem bei dieser Methode tritt auf, wenn Sie die für eine untergeordnete Komponente erforderlichen Eigenschaften nicht kennen und die typische JavaScript-Methode diese Eigenschaften einfach setzt und später an das Objekt bindet. Dies führt zu Problemen mit der PropType-Prüfung und zu Fehlern bei der kryptischen Stapelverfolgung, die nicht hilfreich sind und Verzögerungen beim Debuggen verursachen. Das Folgende ist ein Beispiel für diese Praxis und was nicht zu tun ist:

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

Das gleiche Ergebnis kann mit folgendem Erfolg erzielt werden:

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

Verwenden Sie jedoch nicht JSX Spread oder JSX, um dies wieder in die Gleichung einzufügen, können Sie nun Folgendes tun: 

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

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

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

Außerdem können wir andere Eigenschaftsobjekte aufeinander kopieren oder auf diese Weise kombinieren:

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

Oder führen Sie zwei verschiedene Objekte zusammen (dies ist noch nicht in allen Reaktversionen verfügbar): 

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

Eine andere Erklärung dafür ist laut Facebooks reagieren/docs-Site:

Wenn Sie bereits "Requisiten" als Objekt haben und diese in JSX übergeben möchten, können Sie "..." als SPREAD-Operator verwenden, um das gesamte Requisitenobjekt zu übergeben. 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} />;
}

Spread-Attribute können beim Erstellen von generischen Containern hilfreich sein. Sie können jedoch auch Ihren Code unübersichtlich machen, indem Sie es leicht machen, eine Menge irrelevanter Requisiten an Komponenten zu übergeben, die sich nicht für sie interessieren. Diese Syntax sollte sparsam verwendet werden.

0
esewalson

Spread-Attribute, die verwendet werden, um die mehreren Eigenschaften auf einfache Weise zu übergeben 

{... this.props} hält das Eigentum von this.props

Verwendung des {...} Spread-Operators mit darunterliegenden Requisiten

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

Ohne {...} Spread

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

> 

Mit {...} Spread

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

Dan Abramovs Tweet über Spread-Operator (Ersteller von Redux) https://Twitter.com/dan_abramov/status/694519379191545856?lang=de

0

Die Bedeutung von ... hängt davon ab, wo Sie es im Code verwenden,

  1. Wird zum Verteilen/Kopieren des Arrays/Objekts verwendet. - Das Kopieren des Arrays/Objekts und das Hinzufügen neuer Array-Werte/Hinzufügen neuer Eigenschaften zum Objekt ist optional.
const numbers = [1,2,3];
const newNumbers = [...numbers, 4];
console.log(newNumbers) //prints [1,2,3,4] 
const person = {
 name: 'Max'
};

const newPerson = {...person, age:28};
console.log(newPerson); //prints {name:'Max', age:28}
  1. Wird zum Zusammenführen der Funktionsargumente in einem einzelnen Array verwendet. - Anschließend können Sie Array-Funktionen verwenden.
const filter = (...args) => {
   return args.filter(el => el ===1);
}

console.log(filter(1,2,3)); //prints [1] 
0
Hetal Rachh