Stworzyłem osobny komponent, A, oczywiście, aby ćwiczyć tworzenie własnych komponentów, ale B, również dlatego, że
tak naprawdę jest to podstawowa filozofia reagowania na dzielenie aplikacji na mniejsze części.
Oczywiście od Ciebie zależy, jak mały chcesz go podzielić.
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.
Chodzi po prostu o małe, łatwe do zarządzania pliki kodu.
A później, gdy dodamy więcej logiki do aplikacji, abyśmy mogli z nią również korzystać.
I zmieniliśmy szereg celów, na przykład, po kliknięciu przycisku i tak dalej.
Oczywiście chcemy być w stanie zarządzać dużą logiką w komponencie listy celów, a nie w
oczywistych komponentach.
Tak więc naprawdę podzielenie go na komponenty ma na celu rozdzielenie problemów związanych z utrzymywaniem małych plików,
koncentracją i zarządzaniem, co, jeśli pracujesz w większych projektach, jest ogromną wygraną, ponieważ znacznie ułatwia
zarządzanie i pracę w takim większy projekt.
Jednak do tej pory wszystko w naszej aplikacji jest zakodowane na stałe.
Teraz bardziej realistyczne byłoby powiedzenie, że nasza lista celów jest zarządzana tutaj w aplikacji.
Tak, jako dane.
I chcemy renderować listę Digo H Timal lub J jako pozycje X na podstawie tych danych.
Teraz poradzę sobie z tym tutaj w Abcess, ponieważ później dodam tutaj kolejny komponent, który pomaga nam tworzyć
nowe cele.
Ale na razie dodajmy tutaj normalną stałą.
Komponent funkcjonalny Tudora, ponieważ jest to normalna funkcja JavaScript.
Oczywiście możesz zrobić coś więcej niż tylko zwrócić X i zawartość dysku J tutaj.
Będziemy mieć moje cele kursu.
Możesz nazwać go tak, jak chcesz, a będzie to tablica i tablica.
Każdy cel może być utworzonym tutaj obiektem JavaScript z notacją dosłowną obiektu.
Oczywiście możesz również utworzyć własną funkcję klasy lub konstruktora i utworzyć ją w celu utworzenia takiego
obiektu.
Powiedzmy teraz, że każdy cel ma pomysł.
DO. SOL. jeden dla refrenu, zadzwoń do jednego, a następnie ma tekst, powiedzmy.
A tekst tutaj jest po prostu tekstem.
Zakodowałem tutaj tutaj, kończę kurs.
Więc to kopiuję.
I tutaj podzielę się na wiele wierszy, aby ułatwić czytanie, ponieważ nie będę miał tylko jednego celu,
ale będę wolny.
Pomysły to C. SOL. na NCG za darmo, powiedzmy.
A teraz skopiuję cały ten tekst tutaj.
W moje przedmioty tutaj w Abcess.
Również ten ostatni tekst.
W ten sposób, a teraz mogę się pozbyć tego znaku handlowego i tutaj, nie potrzebujemy go tutaj.
Wszyscy możemy umieścić taki tekst i zareagować odpowiednio go renderuje.
Więc teraz musimy zahartować tablicę Scholesa według mojego pomysłu.
Czy jest to element listy celów tych celów?
Te dane powinny w końcu zostać wyprowadzone.
Powinien więc być wyprowadzany dynamicznie w tym elemencie, w elemencie listy celów, zamiast być trudnym.
Abyśmy mogli usunąć ten kod tutaj.
Nie, pozostawiają nam to dwa problemy.
Po pierwsze, jak możemy dynamicznie wyprowadzać listę danych w J jako X?
Ale w tej chwili ważniejsze niż to.
Jak możemy pobrać tę listę danych, która jest zdefiniowana w komponencie aplikacji, do komponentu Gollust?
Cóż, najpierw skupmy się na tym, ponieważ bez tego nie możemy skupić się na drugim problemie.
Możemy przekazywać dane między komponentami za pomocą pojęcia zwanego rekwizytami skrótowymi od właściwości.
Możemy zdefiniować własne.
Można powiedzieć atrybuty, które są tymi rekwizytami na naszych własnych komponentach.
Na przykład tutaj, na liście celów, możesz powiedzieć, że mamy przedmioty, atrybuty lub cele, atrybuty całkowicie
od Ciebie.
Pójdę tutaj z celami.
A ten złoty atrybut lub rekwizyt jest powszechnym terminem.
Więc czy propozycja Gold następnie przekazuje te dane do tego komponentu?
Teraz nie używam tutaj ciągu, który chcę przekazać, ale zamiast tego chcę
przekazać tutaj moją strukturę danych JavaScript w tablicy D tutaj, a dla taty tutaj, w rzeczywistości używamy specjalnej liczby
Syntex i J jako X. Używamy pojedynczych klamr otwierających i zamykających.
Wygląda na to, że tworzymy tutaj obiekt zadań, ale nie jesteśmy.
Jeśli zrobisz to wewnątrz J, to X, co ja tutaj robię.
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.
I tutaj możemy wskazać na podstawowe umiejętności.
To jest prawidłowe wyrażenie JavaScript.
Wskazujemy tylko na stałą.
A to, co oznacza Disneyland, jest martwe.
Reakcja minie.
Cele kursu tutaj.
W tym przypadku wartość przechowywana w tej stałej ta tablica w tym miejscu J to X.
Dlatego w tym przypadku do tego rekwizytu.
Tak więc celami będzie rekwizyt, który teraz zawiera odniesienie do tej tablicy.
Teraz na liście bramek możemy teraz otrzymać rekwizyt tego złota.
Przejdźmy więc do listy celów i zobaczmy, jak to działa na liście celów.
Mamy funkcję, prawda?
Element funkcjonalny.
Teraz ta funkcja nie otrzymuje żadnych parametrów.
Możemy to zmienić.
Możemy tutaj otrzymać parametr rekwizytów.
Każda funkcja używana jako składnik reagujący, co oznacza, że zwraca J, X również otrzymuje rekwizyty.
Czy ten obiekt przeszedł do twojego reagującego elementu funkcjonalnego automatycznie przez reakcję?
I to obiekt, który łączy wszystkie rekwizyty przekazane do komponentu.
W naszym przypadku celem jest pojedynczy rekwizyt, który mamy.
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
rekwizytu.
Innymi słowy, tutaj mógłbym zablokować konsolę, cele początkowe rekwizytów, cele punktowe, ponieważ tutaj nazwałem według
celów Propp.
Jeśli wybrałeś tutaj inną nazwę, co jest całkowicie w porządku, musisz użyć innej nazwy tutaj.
Teraz, jeśli to uratujemy, w tej chwili nie zobaczymy już naszych celów.
Ale jeśli otworzymy narzędzia programistyczne, zobaczymy, że te areny są tutaj zablokowane.
A dziennik taty pochodzi z szóstej listy celów, jak widać, który jest oczywiście
tym dziennikiem i tam widzimy nasze dane celów, co oznacza, że tak, z powodzeniem dociera do komponentu Gollust.
Koncepcja rekwizytów jest bardzo ważna w reagowaniu, ponieważ pozwala to na przekazywanie danych
z komponentu A, komponentu aplikacji do komponentu B, komponentu listy celów.
W tym przypadku.
Przyjrzyjmy się teraz, jak możemy dynamicznie wyświetlać listę danych w J jako X, ponieważ tutaj mamy listę
celów, tablicę celów i chcemy wyprowadzić to jako elementy listy tutaj na naszej liście nieuporządkowanej.