1 00:00:02,070 --> 00:00:07,740 Wie können wir ein Datenarray als J als X-Elemente ausgeben? 2 00:00:08,280 --> 00:00:10,200 Nun, eigentlich ist es relativ trivial. 3 00:00:10,740 --> 00:00:19,500 Wir werden dieses Array von Jobs und Objekten einem Array von J zuordnen. S. X-Elemente, da REACT ein Array 4 00:00:19,560 --> 00:00:21,960 von JavaScript-Elementen ausgeben kann. 5 00:00:22,450 --> 00:00:23,730 Lassen Sie mich Ihnen zeigen, wie das funktioniert. 6 00:00:23,760 --> 00:00:28,170 Verwenden wir diese einzelnen geschweiften Klammern, da ich hier einen JavaScript-Ausdruck hinzufügen möchte. 7 00:00:28,500 --> 00:00:33,090 In meinem Ausdruck ist hier ein einfaches Array, aber ein Array von Listenelementen. 8 00:00:33,270 --> 00:00:33,900 Hallo. 9 00:00:35,560 --> 00:00:36,510 Und dann noch einer. 10 00:00:36,940 --> 00:00:44,680 Dies funktioniert, ich gebe dies in meinem J is X-Code mit den einzelnen geschweiften Klammern aus, da dieses Jahr natürlich nicht J is X ist, 11 00:00:44,680 --> 00:00:48,700 sondern ein Array, aber es ist ein Array voller J is X. 12 00:00:49,030 --> 00:00:52,150 Und wenn ich sicher bin, wird es hoch ausgegeben und das funktioniert. 13 00:00:52,300 --> 00:00:54,880 Wir erhalten einen Fehler oder eine Warnung, die Sie vorerst ignorieren können. 14 00:00:55,210 --> 00:00:56,710 Das funktioniert aber im Allgemeinen. 15 00:00:57,430 --> 00:01:04,390 Da dies nun mit fest codierten Daten funktioniert, können wir auch unsere Reihe von Zielen ausgeben, sodass wir hier Requisitenziele 16 00:01:04,390 --> 00:01:05,470 ausgeben können. 17 00:01:05,860 --> 00:01:12,490 Das Problem ist jedoch, dass Requisitenziele am Ende ein Array von JavaScript-Objekten sind, kein Array von J. 18 00:01:12,490 --> 00:01:13,030 ASICs-Code. 19 00:01:13,840 --> 00:01:15,400 Also, wenn wir versuchen, dieses Jahr zu produzieren. 20 00:01:16,400 --> 00:01:17,300 Es wird scheitern. 21 00:01:17,540 --> 00:01:21,210 Es zeigt Ihnen, dass Objekte als reagierendes Kind nicht gültig sind. 22 00:01:21,450 --> 00:01:22,460 Während wir Kinder haben. 23 00:01:22,760 --> 00:01:28,210 Letztendlich können wir also keine einfachen Vanille-JavaScript-Objekte in J is X ausgeben. 24 00:01:28,730 --> 00:01:34,390 Stattdessen müssen wir jedes Objekt in ein J als X-Äquivalent abbilden. 25 00:01:34,490 --> 00:01:36,860 Also in ein erneuerbares Element. 26 00:01:37,520 --> 00:01:41,210 Hier wollen wir also am Ende jedes Objekt einem Listenelement zuordnen. 27 00:01:42,050 --> 00:01:44,180 Also auf Requisiten Ziele, die ein Array ist. 28 00:01:44,660 --> 00:01:46,370 Wir können die Kartenmethode aufrufen. 29 00:01:46,580 --> 00:01:50,450 Dies ist eine Standard-Vanilla-JavaScript-Methode, die in jedem Array vorhanden ist. 30 00:01:50,840 --> 00:01:53,300 Die Kartenmethode übernimmt eine Funktion. 31 00:01:54,110 --> 00:01:59,400 Hier übergebe ich eine Pfeilfunktion, die für jedes Element des Arrays ausgeführt wird. 32 00:01:59,450 --> 00:02:04,220 Sie rufen map on auf und dann kehrt die Funktionsstörung hier zurück. 33 00:02:04,630 --> 00:02:10,630 Transformieren Sie die Wörter dieses Elements im ursprünglichen Array, und die Gesamtzuordnung gibt dann ein neues 34 00:02:10,730 --> 00:02:13,100 Array mit diesen transformierten Datenelementen zurück. 35 00:02:13,910 --> 00:02:17,810 Diese Funktion erhält also hier das vorhandene Element. 36 00:02:17,900 --> 00:02:22,490 Jedes Ziel in unserem Zielarray gibt also ein neues Element zurück. 37 00:02:23,150 --> 00:02:28,010 In diesem neuen Array möchte ich also eine Reihe von J mit X-Elementen haben. 38 00:02:28,100 --> 00:02:30,830 Also werde ich hier nur einen Listeneintrag zurückgeben. 39 00:02:31,850 --> 00:02:33,320 Welches ist sie ist natürlich Ex. 40 00:02:35,100 --> 00:02:41,730 Und das Listenelement, ich möchte meinen Goldtext ausgeben, kein Ziel hier ist das JavaScript-Objekt, das wir in Ihrem ursprünglichen Array haben, 41 00:02:41,730 --> 00:02:46,770 da diese Funktion auf jedem Element im ursprünglichen Array ausgeführt wird und Ihnen das Objekt in 42 00:02:46,770 --> 00:02:51,240 der ursprünglichen Rate oder den Daten gibt Stück im ursprünglichen Array als Argument. 43 00:02:51,600 --> 00:02:54,630 Das Ziel hier ist also das Objekt, das wie dieses Jahr aussieht. 44 00:02:56,010 --> 00:02:57,660 Ich interessiere mich also nur für den Text hier. 45 00:02:57,900 --> 00:03:02,150 Und wieder können wir den Text ausgeben, indem wir hier einen JavaScript-Ausdruck ausgeben. 46 00:03:02,340 --> 00:03:07,970 Daher müssen wir hier geschweifte Klammern in unserem J is X-Code einfügen, und wir haben hier einen Zielpunkttext. 47 00:03:09,010 --> 00:03:12,670 Mein Ausdruck ist, dass ich auf die Texteigenschaft des Goldobjekts zugreife. 48 00:03:13,540 --> 00:03:21,250 Was jetzt hier passiert, ist, dass ich mein Array von einfachen JavaScript-Objekten einem Array von J is X-Elementen und einem solchen Array 49 00:03:21,490 --> 00:03:25,630 von G zuordne. S. Wie Sie gelernt haben, ist X-Elemente Render-Rechnung. 50 00:03:27,780 --> 00:03:28,950 Jetzt Gesichtssicherheit. 51 00:03:30,600 --> 00:03:33,060 Sie sehen, das überlistet meine Kernkompetenzen wieder. 52 00:03:33,810 --> 00:03:40,250 Jetzt erhalten wir auch eine Warnung bezüglich eines eindeutigen Schlüssels, der sich darauf bezieht, wie die Reaktion das DOM wiedergibt und 53 00:03:40,290 --> 00:03:42,180 dass es dies effizient tun möchte. 54 00:03:42,450 --> 00:03:45,030 Mehr darüber erfahren Sie in meinem React, dem vollständigen Leitfaden. 55 00:03:45,360 --> 00:03:51,330 Wenn Sie also Datenlisten mit dieser Technik ausgeben, müssen Sie jedem Element, das Sie in 56 00:03:51,570 --> 00:03:54,600 der Liste rendern, eine spezielle Requisite hinzufügen. 57 00:03:54,630 --> 00:03:56,010 In diesem Fall zu jedem Listenelement. 58 00:03:56,390 --> 00:04:00,390 Und das ist die Schlüsselstütze, die eine Requisite ist, die sie selbst versteht. 59 00:04:00,690 --> 00:04:03,120 Und hier möchte ich Ziel I ausgeben. D. D. nochmal. 60 00:04:03,280 --> 00:04:04,480 Eingewickelt in geschweifte Klammern. 61 00:04:04,500 --> 00:04:06,810 Weil dies ein regulärer JavaScript-Ausdruck ist. 62 00:04:08,350 --> 00:04:11,740 Jetzt mit Papa bekommen wir keine Warnung und wir bekommen unsere Kursziele. 63 00:04:12,130 --> 00:04:14,380 So geben wir eine Datenliste aus. 64 00:04:16,400 --> 00:04:18,650 Damit sieht das ziemlich gut aus. 65 00:04:18,680 --> 00:04:20,150 Wir geben unsere Datenliste aus. 66 00:04:20,300 --> 00:04:26,000 Warum arbeiten wir jetzt nicht daran, einige Funktionen hinzuzufügen, mit denen wir unsere eigenen Ziele hinzufügen können? 67 00:04:26,300 --> 00:04:27,920 Das wäre ein schöner nächster Schritt.