1
00:00:02,190 --> 00:00:08,190
Ich habe die separate Komponente A erstellt, um natürlich das Erstellen eigener Komponenten zu üben, aber B,

2
00:00:08,220 --> 00:00:14,160
auch weil es wirklich die Kernphilosophie ist, zu reagieren, um Ihre App in kleinere Teile aufzuteilen.

3
00:00:14,310 --> 00:00:17,120
Natürlich liegt es an Ihnen, wie klein Sie es aufteilen möchten.

4
00:00:17,670 --> 00:00:22,380
Jedes Listenelement könnte zum Beispiel auch seine alte Komponente sein, und daran wäre nichts auszusetzen.

5
00:00:23,040 --> 00:00:26,520
Die Idee ist einfach, kleine, verwaltbare Codedateien zu haben.

6
00:00:26,910 --> 00:00:31,140
Und später, wenn wir der App mehr Logik hinzufügen, damit wir auch mit ihr interagieren können.

7
00:00:31,170 --> 00:00:35,730
Und wir haben eine Reihe von Zielen geändert, zum Beispiel durch Klicken auf eine Schaltfläche und so weiter.

8
00:00:36,390 --> 00:00:41,370
Wir möchten natürlich in der Lage sein, einen Großteil der Logik in der Ziellistenkomponente zu verwalten und keine

9
00:00:41,370 --> 00:00:42,150
offensichtlichen Komponenten.

10
00:00:42,390 --> 00:00:49,470
Wenn Sie es also wirklich in Komponenten aufteilen, haben Sie die Idee, die Bedenken zu trennen, Ihre Dateien klein, konzentriert und

11
00:00:49,500 --> 00:00:55,830
verwaltbar zu halten. Wenn Sie in größeren Projekten arbeiten, ist dies ein großer Gewinn, da es die Verwaltung und

12
00:00:55,830 --> 00:00:58,930
Arbeit in solchen Projekten erheblich vereinfacht größeres Projekt.

13
00:01:00,000 --> 00:01:03,420
Bisher ist jedoch alles in unserer App fest codiert.

14
00:01:04,290 --> 00:01:10,880
Realistischer wäre es nun, wenn unsere Zielliste hier in der App verwaltet wird.

15
00:01:10,970 --> 00:01:12,660
Ja, als Daten.

16
00:01:13,170 --> 00:01:20,160
Und wir möchten die Digo-Liste H Timal-Elemente oder J als X-Elemente basierend auf diesen Daten rendern.

17
00:01:20,640 --> 00:01:27,120
Jetzt werde ich es hier in Abcess einfach verwalten, weil ich später hier eine weitere Komponente hinzufügen werde, die uns hilft, neue

18
00:01:27,120 --> 00:01:28,230
Ziele zu erstellen.

19
00:01:28,530 --> 00:01:31,590
Aber jetzt fügen wir hier einfach eine normale Konstante hinzu.

20
00:01:31,830 --> 00:01:35,760
Tudors Funktionskomponente, da es sich um eine normale JavaScript-Funktion handelt.

21
00:01:35,940 --> 00:01:40,140
Natürlich können Sie hier mehr als nur Js X- und Festplatteninhalt zurückgeben.

22
00:01:40,520 --> 00:01:43,140
Wir werden meine Kursziele haben.

23
00:01:43,200 --> 00:01:47,010
Sie können es benennen, wie Sie möchten, und dies ist ein Array und führt ein Array aus.

24
00:01:47,340 --> 00:01:52,350
Jedes Ziel kann ein JavaScript-Objekt sein, das hier mit der Objektliteralnotation erstellt wurde.

25
00:01:52,560 --> 00:01:58,500
Natürlich können Sie auch Ihre eigene Klassen- oder Konstruktorfunktion erstellen und diese instanziieren, um ein solches Objekt

26
00:01:58,500 --> 00:01:59,220
zu erstellen.

27
00:02:00,030 --> 00:02:01,530
Nehmen wir jetzt an, jedes Ziel hat eine Idee.

28
00:02:02,650 --> 00:02:06,880
C. G. eine für Chor Chor, ruf eine an und hat dann einen Text, sagen wir mal.

29
00:02:07,210 --> 00:02:10,030
Und der Text hier ist einfach der Text.

30
00:02:10,060 --> 00:02:12,880
Ich habe hier fest codiert, beende den Kurs.

31
00:02:12,920 --> 00:02:13,960
Also kopiere ich das.

32
00:02:14,440 --> 00:02:20,560
Und hier werde ich mich auf mehrere Zeilen verteilen, um das Lesen zu erleichtern, da ich nicht nur ein Ziel

33
00:02:20,560 --> 00:02:21,790
habe, sondern frei bin.

34
00:02:22,000 --> 00:02:25,480
Die Ideen sind also C. G. zu NCG frei, sagen wir mal.

35
00:02:25,900 --> 00:02:29,560
Und jetzt werde ich den ganzen Text hier einfach kopieren.

36
00:02:31,540 --> 00:02:34,010
In meine Objekte hier in Abcess.

37
00:02:34,780 --> 00:02:36,550
Auch dieser letzte Text.

38
00:02:37,820 --> 00:02:44,030
So und dort kann ich jetzt auch das kaufmännische Und hier loswerden, wir brauchen es hier nicht.

39
00:02:44,120 --> 00:02:47,480
Wir können alle den Text so einfügen und reagieren, um ihn richtig zu rendern.

40
00:02:48,410 --> 00:02:50,630
Jetzt müssen wir also Scholes Array bei meiner Idee kratzen.

41
00:02:50,660 --> 00:02:54,050
Ist das nun in der Ziellistenkomponente dieser Ziele?

42
00:02:54,080 --> 00:02:56,660
Diese Daten hier sollten am Ende ausgegeben werden.

43
00:02:56,870 --> 00:03:02,080
Es sollte also dynamisch in dieser Komponente ausgegeben werden, in der Ziellistenkomponente, anstatt hart zu sein.

44
00:03:02,450 --> 00:03:03,800
Also können wir diesen Code hier entfernen.

45
00:03:04,220 --> 00:03:06,050
Nein, das lässt uns zwei Probleme haben.

46
00:03:06,350 --> 00:03:10,810
Nummer eins, wie können wir eine Liste von Daten dynamisch in J als X ausgeben?

47
00:03:11,270 --> 00:03:13,130
Aber wichtiger als das im Moment.

48
00:03:13,400 --> 00:03:18,950
Wie können wir diese Liste von Daten, die in der App-Komponente definiert sind, in die Gollust-Komponente übertragen?

49
00:03:19,460 --> 00:03:23,300
Konzentrieren wir uns zuerst darauf, denn ohne das können wir uns nicht auf das andere Problem konzentrieren.

50
00:03:24,170 --> 00:03:31,820
Wir können Daten von Komponente zu Komponente mit einem Konzept namens Requisiten, kurz für Eigenschaften, weitergeben.

51
00:03:32,450 --> 00:03:34,100
Wir können unsere eigenen definieren.

52
00:03:34,130 --> 00:03:39,800
Man könnte Attribute sagen, die diese Requisiten auf unseren eigenen Komponenten sind.

53
00:03:40,250 --> 00:03:46,090
Zum Beispiel könnten Sie hier auf der Zielliste sagen, dass wir Elemente, Attribute oder Ziele haben, Attribute, die ganz

54
00:03:46,160 --> 00:03:47,120
bei Ihnen liegen.

55
00:03:47,630 --> 00:03:48,710
Ich werde hier mit Zielen gehen.

56
00:03:49,680 --> 00:03:53,340
Und dieses Goldattribut oder diese Requisite ist der übliche Begriff.

57
00:03:53,370 --> 00:03:57,870
Gibt Golds Requisite diese Daten dann an diese Komponente weiter?

58
00:03:58,380 --> 00:04:02,280
Dafür verwende ich hier keinen String, den ich weitergeben möchte,

59
00:04:02,280 --> 00:04:08,250
sondern ich möchte mein JavaScript-Datenstruktur-D-Array hier weitergeben, und für Dad hier verwenden wir tatsächlich eine spezielle

60
00:04:08,250 --> 00:04:12,210
Syntex- und J-Nummer X. X. Wir verwenden einzelne öffnende und schließende geschweifte Klammern.

61
00:04:12,780 --> 00:04:15,780
Sieht so aus, als würden wir hier ein Jobobjekt erstellen, aber das sind wir nicht.

62
00:04:16,080 --> 00:04:19,420
Wenn Sie dies innerhalb von J tun, ist X, was ich hier mache.

63
00:04:19,500 --> 00:04:29,190
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.

64
00:04:29,460 --> 00:04:31,370
Und hier können wir auf Kernkompetenzen hinweisen.

65
00:04:31,410 --> 00:04:32,970
Das ist ein gültiger JavaScript-Ausdruck.

66
00:04:33,060 --> 00:04:34,590
Wir zeigen nur auf eine Konstante.

67
00:04:34,990 --> 00:04:36,450
Und was Disneyland bedeutet, ist tot.

68
00:04:36,870 --> 00:04:38,640
Die Reaktion wird vergehen.

69
00:04:38,670 --> 00:04:39,870
Kursziele hier.

70
00:04:40,170 --> 00:04:44,700
Der in dieser Konstante gespeicherte Wert, in diesem Fall dieses Array an dieser Stelle von J, ist X.

71
00:04:44,880 --> 00:04:47,390
In diesem Fall also in diese Requisite.

72
00:04:47,940 --> 00:04:53,140
Ziele werden also eine Requisite sein, die jetzt einen Verweis auf dieses Array enthält.

73
00:04:54,120 --> 00:04:58,370
Jetzt können wir innerhalb der Torliste die Requisite dieses Goldes erhalten.

74
00:04:58,770 --> 00:05:02,340
Gehen wir also zur Zielliste und sehen, wie das in der Zielliste funktioniert.

75
00:05:02,370 --> 00:05:03,360
Wir haben eine Funktion, oder?

76
00:05:03,600 --> 00:05:04,830
Eine funktionale Komponente.

77
00:05:05,610 --> 00:05:08,670
Diese Funktion erhält derzeit keine Parameter.

78
00:05:09,090 --> 00:05:09,930
Wir können das ändern.

79
00:05:10,170 --> 00:05:12,240
Wir können hier einen Requisitenparameter erhalten.

80
00:05:12,900 --> 00:05:20,820
Jede Funktion, die als Reaktionskomponente verwendet wird, dh J zurückgibt, ist X, erhält auch Requisiten.

81
00:05:22,620 --> 00:05:28,160
Wird dieses Objekt automatisch durch Reagieren an Ihre Reaktionsfunktionskomponente übergeben?

82
00:05:28,580 --> 00:05:34,070
Und es ist das Objekt, das alle Requisiten bündelt, die Sie an die Komponente übergeben haben.

83
00:05:34,190 --> 00:05:37,070
In unserem Fall ist es das Ziel, eine einzelne Requisite zu haben, die wir haben.

84
00:05:37,400 --> 00:05:44,420
Hier haben wir also ein Objekt, das eine Eigenschaft mit dem Namen der Ziele hat, die den Wert hinter dieser

85
00:05:44,420 --> 00:05:45,170
Requisite zurückhält.

86
00:05:46,270 --> 00:05:53,110
Mit anderen Worten, hier könnte ich sperren, Startziele stützen, Ziele punktieren, weil ich hier nach Propp-Zielen

87
00:05:53,110 --> 00:05:54,130
benannt habe.

88
00:05:54,430 --> 00:05:59,680
Wenn Sie hier einen anderen Namen gewählt haben, was vollkommen in Ordnung ist, müssen Sie hier den anderen Namen verwenden.

89
00:06:00,580 --> 00:06:03,640
Wenn wir das speichern, werden wir unsere Ziele im Moment nicht mehr sehen.

90
00:06:04,090 --> 00:06:08,140
Wenn wir jedoch die Entwicklertools öffnen, sehen wir, dass diese Arae hier gesperrt sind.

91
00:06:08,230 --> 00:06:13,870
Und das Dad-Protokoll stammt aus Zeile 6 der Zielliste. Wie Sie sehen, ist dieses

92
00:06:13,870 --> 00:06:20,860
Protokoll natürlich hier und da. Wir sehen unsere Zieldaten, was bedeutet, dass es erfolgreich in der Gollust-Komponente ankommt.

93
00:06:21,670 --> 00:06:28,420
Das Konzept der Requisiten ist ein sehr wichtiges Konzept für die Reaktion, da Sie auf diese

94
00:06:28,420 --> 00:06:34,510
Weise Daten von Komponente A, der App-Komponente, an Komponente B, die Ziellistenkomponente, übergeben können.

95
00:06:34,540 --> 00:06:35,230
In diesem Fall.

96
00:06:35,830 --> 00:06:42,790
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

97
00:06:42,790 --> 00:06:48,940
eine Liste von Zielen und eine Reihe von Zielen haben und diese hier in unserer ungeordneten Liste als Listenelemente ausgeben

98
00:06:48,940 --> 00:06:49,360
möchten.