1
00:00:02,190 --> 00:00:08,190
Stworzyłem osobny komponent, A, oczywiście, aby ćwiczyć tworzenie własnych komponentów, ale B, również dlatego, że

2
00:00:08,220 --> 00:00:14,160
tak naprawdę jest to podstawowa filozofia reagowania na dzielenie aplikacji na mniejsze części.

3
00:00:14,310 --> 00:00:17,120
Oczywiście od Ciebie zależy, jak mały chcesz go podzielić.

4
00:00:17,670 --> 00:00:22,380
Na przykład każdy element listy może być również jego starym składnikiem i nie byłoby w tym nic złego.

5
00:00:23,040 --> 00:00:26,520
Chodzi po prostu o małe, łatwe do zarządzania pliki kodu.

6
00:00:26,910 --> 00:00:31,140
A później, gdy dodamy więcej logiki do aplikacji, abyśmy mogli z nią również korzystać.

7
00:00:31,170 --> 00:00:35,730
I zmieniliśmy szereg celów, na przykład, po kliknięciu przycisku i tak dalej.

8
00:00:36,390 --> 00:00:41,370
Oczywiście chcemy być w stanie zarządzać dużą logiką w komponencie listy celów, a nie w

9
00:00:41,370 --> 00:00:42,150
oczywistych komponentach.

10
00:00:42,390 --> 00:00:49,470
Tak więc naprawdę podzielenie go na komponenty ma na celu rozdzielenie problemów związanych z utrzymywaniem małych plików,

11
00:00:49,500 --> 00:00:55,830
koncentracją i zarządzaniem, co, jeśli pracujesz w większych projektach, jest ogromną wygraną, ponieważ znacznie ułatwia

12
00:00:55,830 --> 00:00:58,930
zarządzanie i pracę w takim większy projekt.

13
00:01:00,000 --> 00:01:03,420
Jednak do tej pory wszystko w naszej aplikacji jest zakodowane na stałe.

14
00:01:04,290 --> 00:01:10,880
Teraz bardziej realistyczne byłoby powiedzenie, że nasza lista celów jest zarządzana tutaj w aplikacji.

15
00:01:10,970 --> 00:01:12,660
Tak, jako dane.

16
00:01:13,170 --> 00:01:20,160
I chcemy renderować listę Digo H Timal lub J jako pozycje X na podstawie tych danych.

17
00:01:20,640 --> 00:01:27,120
Teraz poradzę sobie z tym tutaj w Abcess, ponieważ później dodam tutaj kolejny komponent, który pomaga nam tworzyć

18
00:01:27,120 --> 00:01:28,230
nowe cele.

19
00:01:28,530 --> 00:01:31,590
Ale na razie dodajmy tutaj normalną stałą.

20
00:01:31,830 --> 00:01:35,760
Komponent funkcjonalny Tudora, ponieważ jest to normalna funkcja JavaScript.

21
00:01:35,940 --> 00:01:40,140
Oczywiście możesz zrobić coś więcej niż tylko zwrócić X i zawartość dysku J tutaj.

22
00:01:40,520 --> 00:01:43,140
Będziemy mieć moje cele kursu.

23
00:01:43,200 --> 00:01:47,010
Możesz nazwać go tak, jak chcesz, a będzie to tablica i tablica.

24
00:01:47,340 --> 00:01:52,350
Każdy cel może być utworzonym tutaj obiektem JavaScript z notacją dosłowną obiektu.

25
00:01:52,560 --> 00:01:58,500
Oczywiście możesz również utworzyć własną funkcję klasy lub konstruktora i utworzyć ją w celu utworzenia takiego

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

27
00:02:00,030 --> 00:02:01,530
Powiedzmy teraz, że każdy cel ma pomysł.

28
00:02:02,650 --> 00:02:06,880
DO. SOL. jeden dla refrenu, zadzwoń do jednego, a następnie ma tekst, powiedzmy.

29
00:02:07,210 --> 00:02:10,030
A tekst tutaj jest po prostu tekstem.

30
00:02:10,060 --> 00:02:12,880
Zakodowałem tutaj tutaj, kończę kurs.

31
00:02:12,920 --> 00:02:13,960
Więc to kopiuję.

32
00:02:14,440 --> 00:02:20,560
I tutaj podzielę się na wiele wierszy, aby ułatwić czytanie, ponieważ nie będę miał tylko jednego celu,

33
00:02:20,560 --> 00:02:21,790
ale będę wolny.

34
00:02:22,000 --> 00:02:25,480
Pomysły to C. SOL. na NCG za darmo, powiedzmy.

35
00:02:25,900 --> 00:02:29,560
A teraz skopiuję cały ten tekst tutaj.

36
00:02:31,540 --> 00:02:34,010
W moje przedmioty tutaj w Abcess.

37
00:02:34,780 --> 00:02:36,550
Również ten ostatni tekst.

38
00:02:37,820 --> 00:02:44,030
W ten sposób, a teraz mogę się pozbyć tego znaku handlowego i tutaj, nie potrzebujemy go tutaj.

39
00:02:44,120 --> 00:02:47,480
Wszyscy możemy umieścić taki tekst i zareagować odpowiednio go renderuje.

40
00:02:48,410 --> 00:02:50,630
Więc teraz musimy zahartować tablicę Scholesa według mojego pomysłu.

41
00:02:50,660 --> 00:02:54,050
Czy jest to element listy celów tych celów?

42
00:02:54,080 --> 00:02:56,660
Te dane powinny w końcu zostać wyprowadzone.

43
00:02:56,870 --> 00:03:02,080
Powinien więc być wyprowadzany dynamicznie w tym elemencie, w elemencie listy celów, zamiast być trudnym.

44
00:03:02,450 --> 00:03:03,800
Abyśmy mogli usunąć ten kod tutaj.

45
00:03:04,220 --> 00:03:06,050
Nie, pozostawiają nam to dwa problemy.

46
00:03:06,350 --> 00:03:10,810
Po pierwsze, jak możemy dynamicznie wyprowadzać listę danych w J jako X?

47
00:03:11,270 --> 00:03:13,130
Ale w tej chwili ważniejsze niż to.

48
00:03:13,400 --> 00:03:18,950
Jak możemy pobrać tę listę danych, która jest zdefiniowana w komponencie aplikacji, do komponentu Gollust?

49
00:03:19,460 --> 00:03:23,300
Cóż, najpierw skupmy się na tym, ponieważ bez tego nie możemy skupić się na drugim problemie.

50
00:03:24,170 --> 00:03:31,820
Możemy przekazywać dane między komponentami za pomocą pojęcia zwanego rekwizytami skrótowymi od właściwości.

51
00:03:32,450 --> 00:03:34,100
Możemy zdefiniować własne.

52
00:03:34,130 --> 00:03:39,800
Można powiedzieć atrybuty, które są tymi rekwizytami na naszych własnych komponentach.

53
00:03:40,250 --> 00:03:46,090
Na przykład tutaj, na liście celów, możesz powiedzieć, że mamy przedmioty, atrybuty lub cele, atrybuty całkowicie

54
00:03:46,160 --> 00:03:47,120
od Ciebie.

55
00:03:47,630 --> 00:03:48,710
Pójdę tutaj z celami.

56
00:03:49,680 --> 00:03:53,340
A ten złoty atrybut lub rekwizyt jest powszechnym terminem.

57
00:03:53,370 --> 00:03:57,870
Więc czy propozycja Gold następnie przekazuje te dane do tego komponentu?

58
00:03:58,380 --> 00:04:02,280
Teraz nie używam tutaj ciągu, który chcę przekazać, ale zamiast tego chcę

59
00:04:02,280 --> 00:04:08,250
przekazać tutaj moją strukturę danych JavaScript w tablicy D tutaj, a dla taty tutaj, w rzeczywistości używamy specjalnej liczby

60
00:04:08,250 --> 00:04:12,210
Syntex i J jako X. Używamy pojedynczych klamr otwierających i zamykających.

61
00:04:12,780 --> 00:04:15,780
Wygląda na to, że tworzymy tutaj obiekt zadań, ale nie jesteśmy.

62
00:04:16,080 --> 00:04:19,420
Jeśli zrobisz to wewnątrz J, to X, co ja tutaj robię.

63
00:04:19,500 --> 00:04:29,190
To jest J to X, to znaczy, że chcesz połączyć swój kod J to X z pewnym wyrażeniem JavaScript na końcu.

64
00:04:29,460 --> 00:04:31,370
I tutaj możemy wskazać na podstawowe umiejętności.

65
00:04:31,410 --> 00:04:32,970
To jest prawidłowe wyrażenie JavaScript.

66
00:04:33,060 --> 00:04:34,590
Wskazujemy tylko na stałą.

67
00:04:34,990 --> 00:04:36,450
A to, co oznacza Disneyland, jest martwe.

68
00:04:36,870 --> 00:04:38,640
Reakcja minie.

69
00:04:38,670 --> 00:04:39,870
Cele kursu tutaj.

70
00:04:40,170 --> 00:04:44,700
W tym przypadku wartość przechowywana w tej stałej ta tablica w tym miejscu J to X.

71
00:04:44,880 --> 00:04:47,390
Dlatego w tym przypadku do tego rekwizytu.

72
00:04:47,940 --> 00:04:53,140
Tak więc celami będzie rekwizyt, który teraz zawiera odniesienie do tej tablicy.

73
00:04:54,120 --> 00:04:58,370
Teraz na liście bramek możemy teraz otrzymać rekwizyt tego złota.

74
00:04:58,770 --> 00:05:02,340
Przejdźmy więc do listy celów i zobaczmy, jak to działa na liście celów.

75
00:05:02,370 --> 00:05:03,360
Mamy funkcję, prawda?

76
00:05:03,600 --> 00:05:04,830
Element funkcjonalny.

77
00:05:05,610 --> 00:05:08,670
Teraz ta funkcja nie otrzymuje żadnych parametrów.

78
00:05:09,090 --> 00:05:09,930
Możemy to zmienić.

79
00:05:10,170 --> 00:05:12,240
Możemy tutaj otrzymać parametr rekwizytów.

80
00:05:12,900 --> 00:05:20,820
Każda funkcja używana jako składnik reagujący, co oznacza, że zwraca J, X również otrzymuje rekwizyty.

81
00:05:22,620 --> 00:05:28,160
Czy ten obiekt przeszedł do twojego reagującego elementu funkcjonalnego automatycznie przez reakcję?

82
00:05:28,580 --> 00:05:34,070
I to obiekt, który łączy wszystkie rekwizyty przekazane do komponentu.

83
00:05:34,190 --> 00:05:37,070
W naszym przypadku celem jest pojedynczy rekwizyt, który mamy.

84
00:05:37,400 --> 00:05:44,420
Więc tutaj będziemy mieli obiekt, który ma właściwość o nazwie celów, która utrzymuje wartość przeszłości dla tego

85
00:05:44,420 --> 00:05:45,170
rekwizytu.

86
00:05:46,270 --> 00:05:53,110
Innymi słowy, tutaj mógłbym zablokować konsolę, cele początkowe rekwizytów, cele punktowe, ponieważ tutaj nazwałem według

87
00:05:53,110 --> 00:05:54,130
celów Propp.

88
00:05:54,430 --> 00:05:59,680
Jeśli wybrałeś tutaj inną nazwę, co jest całkowicie w porządku, musisz użyć innej nazwy tutaj.

89
00:06:00,580 --> 00:06:03,640
Teraz, jeśli to uratujemy, w tej chwili nie zobaczymy już naszych celów.

90
00:06:04,090 --> 00:06:08,140
Ale jeśli otworzymy narzędzia programistyczne, zobaczymy, że te areny są tutaj zablokowane.

91
00:06:08,230 --> 00:06:13,870
A dziennik taty pochodzi z szóstej listy celów, jak widać, który jest oczywiście

92
00:06:13,870 --> 00:06:20,860
tym dziennikiem i tam widzimy nasze dane celów, co oznacza, że tak, z powodzeniem dociera do komponentu Gollust.

93
00:06:21,670 --> 00:06:28,420
Koncepcja rekwizytów jest bardzo ważna w reagowaniu, ponieważ pozwala to na przekazywanie danych

94
00:06:28,420 --> 00:06:34,510
z komponentu A, komponentu aplikacji do komponentu B, komponentu listy celów.

95
00:06:34,540 --> 00:06:35,230
W tym przypadku.

96
00:06:35,830 --> 00:06:42,790
Przyjrzyjmy się teraz, jak możemy dynamicznie wyświetlać listę danych w J jako X, ponieważ tutaj mamy listę

97
00:06:42,790 --> 00:06:49,360
celów, tablicę celów i chcemy wyprowadzić to jako elementy listy tutaj na naszej liście nieuporządkowanej.