Was machen diese drei Punkte in React?

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

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

Das ist die Notationsverteilung . Es wurde in ES2018 hinzugefügt (Spread für Arrays / Iterables war früher, ES2015), aber es wurde in React-Projekten lange Zeit über Transpilation unterstützt (als " JSX-Spread-Attribute ", obwohl Sie es auch anderswo tun könnten, nicht nur für Attribute ).

{...this.props} verteilt die "eigenen" aufzählbaren Eigenschaften propsals diskrete Eigenschaften auf das ModalElement, das Sie erstellen. Zum Beispiel, wenn this.propsenthalten, a: 1und b: 2dann

<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, so dass alle "eigenen" Eigenschaften enthalten propssind.

Da childrenes sich um eine "eigene" Immobilie handelt props, wird diese in der Verbreitung enthalten sein. Wenn die Komponente, in der dies angezeigt wird, untergeordnete Elemente enthält, werden diese an weitergeleitet Modal. Das Einfügen von untergeordneten Elementen zwischen dem öffnenden und dem schließenden Tag ist nur syntaktischer Zucker - die gute Art -, um eine childrenEigenschaft in das öffnende Tag einzufügen. 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>

Die Spread-Notation ist nicht nur für diesen Anwendungsfall praktisch, sondern auch zum Erstellen eines neuen Objekts mit den meisten (oder allen) Eigenschaften eines vorhandenen Objekts. Dies tritt häufig auf, wenn Sie den Status aktualisieren, da Sie den Status nicht ändern können direkt:

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

Dies wird this.state.foodurch ein neues Objekt mit denselben Eigenschaften ersetzt, mit fooAusnahme der aEigenschaft, die Folgendes wird "updated":

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;
}

Wie Sie wissen, ...werden Spread-Attribute genannt, die der Name darstellt, mit dem 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 nette Abkürzung, können wir sagen .

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

1. Arrays verketten

   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. Ein Array zerstören

     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. 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'}
   

Es gibt eine andere Verwendung für die drei Punkte, die als Rest-Parameter bekannt ist, und es ermöglicht, alle Argumente einer Funktion in einem Array zusammenzufassen.

4. Funktionsargumente als Array

    function fun1(...params) { 
   
    }  
   

Die drei Punkte in JavaScript sind Spread / Rest-Operatoren .

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)]

Ruheparameter

Die Rest Parametersyntax ist für Funktionen mit variable Anzahl von Argumenten verwendet.

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

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

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

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

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

Dieser Weg ist in Ordnung, wenn wir maximal 3 Parameter haben. Was aber, wenn wir zum Beispiel 110 Parameter hinzufügen müssen? Sollten wir sie alle definieren und einzeln hinzufügen?

Natürlich gibt es einen einfacheren Weg, der SPREAD heißt . Anstatt alle diese Parameter zu übergeben, schreiben Sie:

function (...numbers){} 

Wir haben keine Ahnung, wie viele Parameter wir haben, aber wir wissen, dass es Haufen 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

In JSX werden Requisiten für Sie nur anders definiert !

...In ES6 werden Array- und Objektoperatoren verwendet (Objekt 1 wird noch nicht vollständig unterstützt). Wenn Sie also Ihre Requisiten bereits definiert haben, können Sie sie auf diese Weise an Ihr Element übergeben.

In Ihrem Fall sollte der Code also ungefähr so ​​aussehen:

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

Die von Ihnen definierten Requisiten sind jetzt 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 im Voraus für eine Komponente platzieren möchten, ist die Verwendung von JSX einfach:

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

Das Mutieren von Requisiten ist schlecht
Wenn Sie nicht wissen, welche Eigenschaften Sie festlegen möchten, könnten Sie versucht sein, 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 erst viel später helfen können, die richtigen PropTypes zu überprüfen. Dies bedeutet, dass Ihre propTypes-Fehler mit einem kryptischen Stack-Trace enden.

Die Requisiten sollten als unveränderlich angesehen werden. Das Mutieren des Requisitenobjekts an einer anderen Stelle kann unerwartete Folgen haben. Idealerweise handelt es sich zu diesem Zeitpunkt um ein eingefrorenes Objekt.

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

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

Die Eigenschaften des Objekts, das Sie übergeben, werden auf die Requisiten der Komponente kopiert.

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

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

Was ist mit der seltsamen ... Notation?
Der Operator ... (oder Spread-Operator) wird bereits für Arrays in ES6 unterstützt. Es gibt auch einen ECMAScript-Vorschlag für Objektrest- und Spread-Eigenschaften. Wir nutzen diese unterstützten und sich entwickelnden Standards, um eine sauberere Syntax in JSX bereitzustellen.

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

Ich bin mir bewusst, dass dies eine JSX-Frage ist, aber die Arbeit mit Analogien hilft manchmal, sie schneller zu bekommen.

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

bieten eine saubere Möglichkeit, Requisiten von übergeordneten an untergeordnete Komponenten weiterzugeben. zB gegeben diese Requisiten in einer übergeordneten Komponente,

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

Sie könnten auf folgende Weise an das Kind weitergegeben werden:

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

das ist ähnlich

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

aber viel sauberer.

Drei Punkte stehen ...für Spread-Operatoren oder Ruheparameter .

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

• Führen Sie zwei Arrays zusammen

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. Daher ist es möglicherweise nicht zum Kopieren mehrdimensionaler Arrays geeignet, wie das folgende Beispiel zeigt (dies gilt auch für Object.assign () und die Spread-Syntax).

• Addieren Sie Werte eines Arrays zu einem anderen an 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 Aufrufen eines Konstruktors mit new:

var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);

console.log(d);

• In Objektliteralen verbreiten:

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 fooEigentum von obj1 wird von obj2 überschrieben worden fooEigenschaft

• 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 (außer bei Spread-Eigenschaften) kann nur auf iterierbare Objekte angewendet werden: Im Folgenden wird ein Fehler ausgegeben

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

Referenz1

Referenz2

Ein großes Lob an Brandon Morelli. Er hat es hier perfekt erklärt , aber Links können sterben, also füge ich nur den folgenden Inhalt ein:

Die Spread-Syntax besteht einfach aus drei Punkten: ... Sie ermöglicht es einem Iterable, an Stellen zu expandieren, an denen 0+ Argumente erwartet werden. Definitionen sind ohne Kontext schwierig. Lassen Sie uns einige verschiedene Anwendungsfälle untersuchen, um zu verstehen, was dies bedeutet.

Beispiel 1 - Einfügen von Arrays Sehen Sie sich den folgenden Code an. In diesem Code verwenden wir nicht die Spread-Syntax:

var mid = [3, 4];
var arr = [1, 2, mid, 5, 6];

console.log(arr);

Oben haben wir ein Array mit dem Namen erstellt mid. Wir erstellen dann ein zweites Array, das unser midArray enthält . Schließlich melden wir das Ergebnis ab. Was erwarten Sie arrzu drucken? Klicken Sie oben auf Ausführen, um zu sehen, was passiert. Hier ist die Ausgabe:

[1, 2, [3, 4], 5, 6]

Ist das das Ergebnis, das Sie erwartet haben? Durch das Einfügen des midArrays in das arrArray haben wir ein Array innerhalb eines Arrays erhalten. Das ist in Ordnung, wenn das das Ziel war. Aber was ist, wenn Sie nur ein einziges Array mit den Werten 1 bis 6 möchten? Um dies zu erreichen, können wir die Spread-Syntax verwenden! Denken Sie daran, dass die Spread-Syntax die Erweiterung der Elemente unseres Arrays ermöglicht. Schauen wir uns den folgenden Code an. Alles ist gleich - außer dass wir jetzt die Spread-Syntax verwenden, um das midArray in das arrArray einzufügen :

var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];

console.log(arr);

Und wenn Sie den Run-Button drücken, ist hier das Ergebnis:

[1, 2, 3, 4, 5, 6]

Genial! Erinnern Sie sich an die Spread-Syntax-Definition, die Sie gerade oben gelesen haben? Hier kommt es ins Spiel. Wie Sie sehen können , wird das Array erweitert , wenn wir das arrArray erstellen und den Spread-Operator für das midArray verwenden, anstatt nur eingefügt zu werden mid. Diese Erweiterung bedeutet, dass jedes einzelne Element im midArray in das Array eingefügt wird arr. Anstelle von verschachtelten Arrays ist das Ergebnis ein einzelnes Array von Zahlen im Bereich von 1 bis 6.

Beispiel 2 - Mathematik JavaScript verfügt über ein integriertes Mathematikobjekt, mit dem wir einige unterhaltsame mathematische Berechnungen durchführen können. In diesem Beispiel werden wir uns ansehen Math.max(). Wenn Sie nicht vertraut sind, wird Math.max()die größte von null oder mehr Zahlen zurückgegeben. Hier einige Beispiele:

Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100

Wie Sie sehen können, Math.max()sind mehrere Parameter erforderlich , wenn Sie den Maximalwert mehrerer Zahlen ermitteln möchten . Sie können leider nicht einfach ein einzelnes Array als Eingabe verwenden. Vor der Spread-Syntax ist die Verwendung Math.max()in einem Array am einfachsten.apply()

var arr = [2, 4, 8, 6, 0];

function max(arr) {
  return Math.max.apply(null, arr);
}

console.log(max(arr));

Es funktioniert, es ist nur wirklich nervig. Schauen Sie sich nun an, wie wir genau dasselbe mit der Spread-Syntax machen:

var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);

console.log(max);

Anstatt eine Funktion erstellen und die Methode apply verwenden zu müssen, um das Ergebnis von zurückzugeben Math.max(), benötigen wir nur zwei Codezeilen! Die Spread-Syntax erweitert unsere Array-Elemente und gibt jedes Element in unserem Array einzeln in die Math.max()Methode ein!

Beispiel 3 - Kopieren eines Arrays In JavaScript können Sie ein Array nicht einfach kopieren, indem Sie eine neue Variable festlegen, die dem bereits vorhandenen Array entspricht. Betrachten Sie das folgende Codebeispiel:

var arr = ['a', 'b', 'c'];
var arr2 = arr;

console.log(arr2);

Wenn Sie auf Ausführen klicken, wird die folgende Ausgabe angezeigt:

['a', 'b', 'c']

Auf den ersten Blick sieht es so aus, als hätte es funktioniert - es sieht so aus, als hätten wir die Werte von arr in arr2 kopiert. Aber das ist nicht passiert. Sie sehen, wenn Sie mit Objekten in Javascript arbeiten (Arrays sind ein Objekttyp), weisen wir sie als Referenz und nicht als Wert zu. Dies bedeutet, dass arr2 derselben Referenz wie arr zugewiesen wurde. Mit anderen Worten, alles, was wir mit arr2 tun, wirkt sich auch auf das ursprüngliche arr-Array aus (und umgekehrt). Schauen Sie unten nach:

var arr = ['a', 'b', 'c'];
var arr2 = arr;

arr2.push('d');

console.log(arr);

Oben haben wir ein neues Element d in arr2 verschoben. Wenn wir jedoch den Wert von arr abmelden, werden Sie sehen, dass der d-Wert auch zu diesem Array hinzugefügt wurde:

['a', 'b', 'c', 'd']

Kein Grund zur Angst! Wir können den Spread-Operator verwenden! Betrachten Sie den folgenden Code. Es ist fast das gleiche wie oben. Stattdessen haben wir den Spread-Operator in zwei eckigen Klammern verwendet:

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];

console.log(arr2);

Wenn Sie auf "Ausführen" klicken, wird die erwartete Ausgabe angezeigt:

['a', 'b', 'c']

Oben wurden die Array-Werte in arr zu einzelnen Elementen erweitert, die dann arr2 zugewiesen wurden. Wir können jetzt das arr2-Array so oft ändern, wie wir möchten, ohne dass dies Auswirkungen auf das ursprüngliche arr-Array hat:

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];

arr2.push('d');

console.log(arr);

Der Grund dafür ist wiederum, dass der Wert von arr erweitert wird, um die Klammern unserer arr2-Array-Definition zu füllen. Daher setzen wir arr2 so, dass es den einzelnen Werten von arr entspricht, anstatt wie im ersten Beispiel auf arr zu verweisen.

Bonusbeispiel - String zu Array Als unterhaltsames letztes Beispiel können Sie die Spread-Syntax verwenden, um einen String in ein Array zu konvertieren. Verwenden Sie einfach die Spread-Syntax in eckigen Klammern:

var str = "hello";
var chars = [...str];

console.log(chars);

Die drei Punkte (...)werden als Spread-Operator bezeichnet. Dies ähnelt konzeptionell dem ES6-Array-Spread-Operator. JSX nutzt diese unterstützten und sich entwickelnden Standards, um eine sauberere Syntax in JSX bereitzustellen

Spread-Eigenschaften in Objektinitialisierern kopieren eigene aufzählbare 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

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

1. Wird zum Verteilen / Kopieren des Arrays / Objekts verwendet - Es hilft, Array / Objekt zu kopieren und dem Objekt neue Array-Werte hinzuzufügen / neue Eigenschaften hinzuzufügen, was optional ist.

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}

2. Wird zum Zusammenführen der Funktionsargumente zu 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] 

Dies ist ein Spread-Operator ...

Zum Beispiel, wenn Sie ein Array first=[1,2,3,4,5]und ein anderes haben second=[6,7,8].

[...first, ...second] //result is [1,2,3,4,5,6,7,8]

Das gleiche kann auch mit json-Objekten gemacht werden.

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

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


console.log(b);

Gibt das Ergebnis [1,2,3,4,5,6]

console.log(c);

Gibt das Ergebnis [7,8,1,2,3,4]

Wird normalerweise als Spread-Operator bezeichnet und dient zum Erweitern, wo immer dies erforderlich ist

Beispiel

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

Sie können dies verwenden, wo immer Sie es benötigen. Weitere Informationen zur Spread-Operator- Spread-Syntax .

Spread-Attribute, mit denen die verschiedenen Eigenschaften auf einfache Weise übergeben werden

{... this.props} hält die Eigenschaft von this.props

Verwendung des Spread Operators {...} mit den folgenden Requisiten

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

Ohne {...} Verbreitung

<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 den Spread-Operator (Creator of Redux)

... diese Syntax ist Teil von ES6 und nicht etwas, das Sie nur in React verwenden können. Sie kann auf zwei verschiedene Arten verwendet werden. als Spread-Operator ODER als Rest-Parameter. Weitere Informationen finden Sie in diesem Artikel: https://www.techiediaries.com/react-spread-operator-props-setstate/

Was Sie in der Frage erwähnt haben, ist so etwas. Nehmen wir an, so

    function HelloUser() {
      return <Hello Name="ABC" City="XYZ" />;
    }

Mit dem Spread-Operator können Sie Requisiten wie folgt an die Komponente übergeben.

     function HelloUser() {
       const props = {Name: 'ABC', City: 'XYZ'};
       return <Hello {...props} />;
     }

Es ist üblich, Requisiten in einer React-Anwendung weiterzugeben. 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 ganzes Objekt von 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 folgender Syntax beschrieben:

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

Dies ist in Ordnung, wenn die Anzahl der Requisiten minimal ist, wird jedoch nicht mehr handhabbar, wenn die Anzahl der Requisiten zu hoch wird. Ein Problem mit dieser Methode tritt auf, wenn Sie die in einer untergeordneten Komponente erforderlichen Eigenschaften nicht kennen und die typische JavaScript-Methode darin besteht, diese Eigenschaften einfach festzulegen und später an das Objekt zu binden. Dies führt zu Problemen bei der PropType-Überprüfung und zu Fehlern bei der Verfolgung kryptischer Stapel, die nicht hilfreich sind und zu Verzögerungen beim Debuggen führen. 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 jedoch mit angemessenerem Erfolg erzielt werden:

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

Verwendet jedoch weder JSX-Spread noch JSX, um dies wieder in die Gleichung einzuschleifen, können wir jetzt so etwas tun:

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

Die in "... Requisiten" enthaltenen Eigenschaften sind foo: x, bar: y. Dies kann mit anderen Attributen kombiniert werden, um die Eigenschaften von "... Requisiten" mithilfe 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 folgende 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 wie dieses zusammen (dies ist noch nicht in allen Reaktionsversionen verfügbar):

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

Eine andere Möglichkeit, dies zu erklären, ist laut Facebooks React / 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 äquivalent:

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}



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

Spread-Attribute können nützlich sein, wenn Sie generische Container erstellen. Sie können Ihren Code jedoch auch unübersichtlich machen, indem sie es einfach machen, viele irrelevante Requisiten an Komponenten zu übergeben, die sich nicht um sie kümmern. Diese Syntax sollte sparsam verwendet werden.

Es heißt Spread-Operator. Zum Beispiel let hello = {name: '', msg: ''} let hello1 = {... hello} Jetzt werden die Objekteigenschaften von hello nach hello1 kopiert.

Es heißt Spreads-Syntax in Javascript.

Es wird zum Destrukturieren eines Arrays oder Objekts in Javascript verwendet.

Beispiel:

const objA = { a: 1, b: 2, c: 3 }
const objB = { ...objA, d: 1 }
/* result of objB will be { a: 1, b: 2, c: 3, d: 1 } */
console.log(objB)

const objC = { ....objA, a: 3 }
/* result of objC will be { a: 3, b: 2, c: 3, d: 1 } */
console.log(objC)

Sie können das gleiche Ergebnis mit der Object.assign()Funktion in Javascript erzielen.

Referenz: Spread- Syntax

Dies wird zusammengestellt in:

React.createElement(Modal, { ...this.props, title: "Modal heading", animation: false }, child0, child1, child2, ...)

wo es mehr zwei Eigenschaften gibt title& animationjenseits propsdes Host-Elements hat.

...ist der ES6-Operator namens Spread .

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

Spread-Operator (Triple-Operator) in Ecama-Skript 6 (ES6) einführen. Ecama-Skript (ES6) ist ein Wrapper von Javascript.

Verbreiten Sie Operator Aufzählbare Eigenschaften in Requisiten. this.props = {Vorname: 'Dan', Nachname: 'Abramov', Stadt: 'New York', Land: 'USA'}

{... this.props} = {Vorname: 'Dan', Nachname: 'Abramov', Stadt: 'New York', Land: 'USA'}

Der Hauptmerkmal-Spread-Operator wird jedoch für einen Referenztyp verwendet.

For example
let person= {
    name: 'Alex',
    age: 35 
}
person1= person;

person1.name = "Raheel";

console.log( person.name); // output: Raheel

Dies wird als Referenztyp bezeichnet. Ein Objekt wirkt sich auf andere Objekte aus, da diese im Speicher gemeinsam genutzt werden können. Wenn Sie einen unabhängigen Wert für den Spread-Speicher erhalten, verwenden beide den Spread-Operator.

 let person= {
        name: 'Alex',
        age: 35 
    }
person2 = {...person};

person2.name = "Shahzad";

console.log(person.name); // output: Alex

Wenn Sie ein Array von Elementen haben und die Elemente anzeigen möchten, die Sie gerade verwenden ... Array-Elemente, werden alle Elemente durchlaufen

...(drei Punkte in Javascript) wird als Spread-Syntax oder Spread-Operator bezeichnet. Auf diese Weise kann ein iterierbarer Ausdruck wie ein Array- Ausdruck oder eine Zeichenfolge oder ein Objektausdruck an einer beliebigen Stelle erweitert werden. Dies ist nicht spezifisch für React. Es ist ein Javascript-Operator.

Alle diese Antworten hier sind hilfreich, aber ich möchte die am häufigsten verwendeten praktischen Anwendungsfälle der Spread-Syntax (Spread-Operator) auflisten.

1. Arrays kombinieren (Arrays verketten)

Es gibt verschiedene Möglichkeiten, Arrays zu kombinieren. Mit dem Spread-Operator können Sie dies jedoch an einer beliebigen Stelle in einem Array platzieren. Wenn Sie zwei Arrays kombinieren und Elemente an einer beliebigen Stelle im Array platzieren möchten, haben Sie folgende Möglichkeiten:

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

// arr2 = ["one", "two", "three", "four", "five"]

2. Arrays kopieren

Wenn wir eine Kopie eines Arrays wollten, hatten wir die Methode Array.prototypr.slice () . Sie können dies jedoch auch mit dem Spread-Operator tun.

var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]

3. Funktionen ohne Anwenden aufrufen

In ES5 verwenden doStuff()Sie häufig die Methode Function.prototype.apply () wie folgt , um ein Array mit zwei Zahlen an die Funktion zu übergeben :

function doStuff (x, y, z) { }
var args = [0, 1, 2];

// Call the function, passing args
doStuff.apply(null, args);

Mit dem Spread-Operator können Sie jedoch ein Array an die Funktion übergeben.

doStuff(...args);

4. Arrays zerstören

Sie können die Destrukturierung und den Restoperator zusammen verwenden, um die Informationen nach Belieben in Variablen zu extrahieren:

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

5. Funktionsargumente als Ruheparameter

ES6 hat auch die drei Punkte (...), ein Restparameter, der alle verbleibenden Argumente einer Funktion in einem Array sammelt.

function f(a, b, ...args) {
  console.log(args);
}

f(1,2,3,4,5);
// [ 3, 4, 5 ]

6. Verwenden von mathematischen Funktionen

Jede Funktion, bei der Spread als Argument verwendet wird, kann von Funktionen verwendet werden, die eine beliebige Anzahl von Argumenten akzeptieren können.

let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

7. Zwei Objekte kombinieren

Mit dem Spread-Operator können Sie zwei Objekte kombinieren. Dies ist eine einfache und sauberere Methode.

var carType = {
  model: 'Toyota',
  yom: '1995'
};

var carFuel = 'Petrol';

var carData = {
  ...carType,
  carFuel
}

console.log(carData); 
// {
//  model: 'Toyota',
//  yom: '1995',
//  carFuel = 'Petrol'
// }

8. Trennen Sie eine Zeichenfolge in separate Zeichen

Mit dem Spread-Operator können Sie eine Zeichenfolge in separate Zeichen verteilen.

let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]

Sie können sich weitere Möglichkeiten vorstellen, den Spread-Operator zu verwenden. Was ich hier aufgelistet habe, sind die gängigen Anwendungsfälle.

Dies ist eine neue Funktion in ES6 / Harmony. Es wird der Spread-Operator genannt. Sie können entweder die Bestandteile eines Arrays / Objekts trennen oder mehrere Elemente / Parameter nehmen und zusammenkleben. Hier ist ein Beispiel:

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

Und mit einem Objekt / Schlüsseln:

// 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 "den Rest der 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

Diese werden Spreads genannt. So wie der Name schon sagt. Es bedeutet, dass der Wert in dieses Array oder diese Objekte eingefügt wird.

Sowie :

let a = [1, 2, 3];
let b = [...a, 4, 5, 6];
console.log(b);
> [1, 2, 3, 4, 5, 6]