Ich habe die separate Komponente A erstellt, um natürlich das Erstellen eigener Komponenten zu üben, aber B,
auch weil es wirklich die Kernphilosophie ist, zu reagieren, um Ihre App in kleinere Teile aufzuteilen.
Natürlich liegt es an Ihnen, wie klein Sie es aufteilen möchten.
Jedes Listenelement könnte zum Beispiel auch seine alte Komponente sein, und daran wäre nichts auszusetzen.
Die Idee ist einfach, kleine, verwaltbare Codedateien zu haben.
Und später, wenn wir der App mehr Logik hinzufügen, damit wir auch mit ihr interagieren können.
Und wir haben eine Reihe von Zielen geändert, zum Beispiel durch Klicken auf eine Schaltfläche und so weiter.
Wir möchten natürlich in der Lage sein, einen Großteil der Logik in der Ziellistenkomponente zu verwalten und keine
offensichtlichen Komponenten.
Wenn Sie es also wirklich in Komponenten aufteilen, haben Sie die Idee, die Bedenken zu trennen, Ihre Dateien klein, konzentriert und
verwaltbar zu halten. Wenn Sie in größeren Projekten arbeiten, ist dies ein großer Gewinn, da es die Verwaltung und
Arbeit in solchen Projekten erheblich vereinfacht größeres Projekt.
Bisher ist jedoch alles in unserer App fest codiert.
Realistischer wäre es nun, wenn unsere Zielliste hier in der App verwaltet wird.
Ja, als Daten.
Und wir möchten die Digo-Liste H Timal-Elemente oder J als X-Elemente basierend auf diesen Daten rendern.
Jetzt werde ich es hier in Abcess einfach verwalten, weil ich später hier eine weitere Komponente hinzufügen werde, die uns hilft, neue
Ziele zu erstellen.
Aber jetzt fügen wir hier einfach eine normale Konstante hinzu.
Tudors Funktionskomponente, da es sich um eine normale JavaScript-Funktion handelt.
Natürlich können Sie hier mehr als nur Js X- und Festplatteninhalt zurückgeben.
Wir werden meine Kursziele haben.
Sie können es benennen, wie Sie möchten, und dies ist ein Array und führt ein Array aus.
Jedes Ziel kann ein JavaScript-Objekt sein, das hier mit der Objektliteralnotation erstellt wurde.
Natürlich können Sie auch Ihre eigene Klassen- oder Konstruktorfunktion erstellen und diese instanziieren, um ein solches Objekt
zu erstellen.
Nehmen wir jetzt an, jedes Ziel hat eine Idee.
C. G. eine für Chor Chor, ruf eine an und hat dann einen Text, sagen wir mal.
Und der Text hier ist einfach der Text.
Ich habe hier fest codiert, beende den Kurs.
Also kopiere ich das.
Und hier werde ich mich auf mehrere Zeilen verteilen, um das Lesen zu erleichtern, da ich nicht nur ein Ziel
habe, sondern frei bin.
Die Ideen sind also C. G. zu NCG frei, sagen wir mal.
Und jetzt werde ich den ganzen Text hier einfach kopieren.
In meine Objekte hier in Abcess.
Auch dieser letzte Text.
So und dort kann ich jetzt auch das kaufmännische Und hier loswerden, wir brauchen es hier nicht.
Wir können alle den Text so einfügen und reagieren, um ihn richtig zu rendern.
Jetzt müssen wir also Scholes Array bei meiner Idee kratzen.
Ist das nun in der Ziellistenkomponente dieser Ziele?
Diese Daten hier sollten am Ende ausgegeben werden.
Es sollte also dynamisch in dieser Komponente ausgegeben werden, in der Ziellistenkomponente, anstatt hart zu sein.
Also können wir diesen Code hier entfernen.
Nein, das lässt uns zwei Probleme haben.
Nummer eins, wie können wir eine Liste von Daten dynamisch in J als X ausgeben?
Aber wichtiger als das im Moment.
Wie können wir diese Liste von Daten, die in der App-Komponente definiert sind, in die Gollust-Komponente übertragen?
Konzentrieren wir uns zuerst darauf, denn ohne das können wir uns nicht auf das andere Problem konzentrieren.
Wir können Daten von Komponente zu Komponente mit einem Konzept namens Requisiten, kurz für Eigenschaften, weitergeben.
Wir können unsere eigenen definieren.
Man könnte Attribute sagen, die diese Requisiten auf unseren eigenen Komponenten sind.
Zum Beispiel könnten Sie hier auf der Zielliste sagen, dass wir Elemente, Attribute oder Ziele haben, Attribute, die ganz
bei Ihnen liegen.
Ich werde hier mit Zielen gehen.
Und dieses Goldattribut oder diese Requisite ist der übliche Begriff.
Gibt Golds Requisite diese Daten dann an diese Komponente weiter?
Dafür verwende ich hier keinen String, den ich weitergeben möchte,
sondern ich möchte mein JavaScript-Datenstruktur-D-Array hier weitergeben, und für Dad hier verwenden wir tatsächlich eine spezielle
Syntex- und J-Nummer X. X. Wir verwenden einzelne öffnende und schließende geschweifte Klammern.
Sieht so aus, als würden wir hier ein Jobobjekt erstellen, aber das sind wir nicht.
Wenn Sie dies innerhalb von J tun, ist X, was ich hier mache.
Das ist J ist X, dann bedeutet dies, dass Sie Ihren J ist X-Code am Ende mit einem JavaScript-Ausdruck zusammenführen möchten.
Und hier können wir auf Kernkompetenzen hinweisen.
Das ist ein gültiger JavaScript-Ausdruck.
Wir zeigen nur auf eine Konstante.
Und was Disneyland bedeutet, ist tot.
Die Reaktion wird vergehen.
Kursziele hier.
Der in dieser Konstante gespeicherte Wert, in diesem Fall dieses Array an dieser Stelle von J, ist X.
In diesem Fall also in diese Requisite.
Ziele werden also eine Requisite sein, die jetzt einen Verweis auf dieses Array enthält.
Jetzt können wir innerhalb der Torliste die Requisite dieses Goldes erhalten.
Gehen wir also zur Zielliste und sehen, wie das in der Zielliste funktioniert.
Wir haben eine Funktion, oder?
Eine funktionale Komponente.
Diese Funktion erhält derzeit keine Parameter.
Wir können das ändern.
Wir können hier einen Requisitenparameter erhalten.
Jede Funktion, die als Reaktionskomponente verwendet wird, dh J zurückgibt, ist X, erhält auch Requisiten.
Wird dieses Objekt automatisch durch Reagieren an Ihre Reaktionsfunktionskomponente übergeben?
Und es ist das Objekt, das alle Requisiten bündelt, die Sie an die Komponente übergeben haben.
In unserem Fall ist es das Ziel, eine einzelne Requisite zu haben, die wir haben.
Hier haben wir also ein Objekt, das eine Eigenschaft mit dem Namen der Ziele hat, die den Wert hinter dieser
Requisite zurückhält.
Mit anderen Worten, hier könnte ich sperren, Startziele stützen, Ziele punktieren, weil ich hier nach Propp-Zielen
benannt habe.
Wenn Sie hier einen anderen Namen gewählt haben, was vollkommen in Ordnung ist, müssen Sie hier den anderen Namen verwenden.
Wenn wir das speichern, werden wir unsere Ziele im Moment nicht mehr sehen.
Wenn wir jedoch die Entwicklertools öffnen, sehen wir, dass diese Arae hier gesperrt sind.
Und das Dad-Protokoll stammt aus Zeile 6 der Zielliste. Wie Sie sehen, ist dieses
Protokoll natürlich hier und da. Wir sehen unsere Zieldaten, was bedeutet, dass es erfolgreich in der Gollust-Komponente ankommt.
Das Konzept der Requisiten ist ein sehr wichtiges Konzept für die Reaktion, da Sie auf diese
Weise Daten von Komponente A, der App-Komponente, an Komponente B, die Ziellistenkomponente, übergeben können.
In diesem Fall.
Lassen Sie uns nun einen Blick darauf werfen, wie wir eine Liste von Daten in J als X dynamisch ausgeben können, da wir hier
eine Liste von Zielen und eine Reihe von Zielen haben und diese hier in unserer ungeordneten Liste als Listenelemente ausgeben
möchten.