ForwardRef w React – kiedy i jak go używać

Ewelina Kwiatkowska
3 tygodnie temu, 23 sierpnia 2024
0
2

Pracując w React zapewne zdarzyło Ci się potrzebować bezpośredniego dostępu do elementu DOM w komponencie funkcyjnym. Może chciałeś ustawić focus na input lub przewinąć do konkretnego elementu, ale nie wiedziałeś, jak to zrobić? Dzisiaj przedstawię Ci forwardRef – funkcję, która rozwiązuje te problemy w elegancki sposób. Usiądź wygodnie, weź ulubioną kawę i dowiedz się, jak forwardRef może ułatwić Ci pracę z Reactem!

Czym jest forwardRef?

ForwardRef to funkcja w React, która umożliwia przekazywanie referencji (refs) z komponentu rodzica do komponentu dziecka w komponentach funkcyjnych. Dzięki temu rodzic może uzyskać bezpośredni dostęp do elementu DOM lub komponentu wewnątrz dziecka. Jest to szczególnie przydatne, gdy rodzic musi bezpośrednio manipulować elementem DOM w dziecku. Brzmi skomplikowanie? Nie martw się, zaraz wszystko stanie się jasne!

Wyobraź sobie, że masz dwa komponenty: rodzica i dziecko. Zwykle rodzic nie może bezpośrednio zmieniać czegoś w dziecku. ForwardRef pozwala rodzicowi na „podanie ręki” dziecku, dzięki czemu może on bezpośrednio coś w nim zmieniać. W praktyce to może być przydatne, na przykład, gdy chcesz z poziomu komponentu nadrzędnego (rodzica) przewijać listę lub ustawić focus na polu tekstowym znajdującym się w komponencie podrzędnym (dziecku).

Praktyczny przykład z użyciem forwardRef

Aby lepiej zrozumieć, jak działa forwardRef, przeanalizujmy prosty przykład krok po kroku. Stworzymy dwa komponenty: Parent (rodzic) i Child (dziecko). Naszym celem będzie ustawienie focusu na polu input w dziecku, ale z poziomu rodzica. Brzmi interesująco? Zaczynamy!

Krok 1: Tworzymy komponent Child

Najpierw zbudujemy komponent dziecka (Child). W tym komponencie znajdzie się element input, na który będziemy chcieli ustawić focus. Dodamy też możliwość ustawienia placeholdera przez rodzica, przekazując go jako props.

komponent React

Co tu się dzieje?

  • Używamy funkcji forwardRef, aby przekazać ref z rodzica do elementu input.
  • forwardRef przyjmuje funkcję, która renderuje nasz komponent.
  • Ta funkcja otrzymuje dwa argumenty:
    • props: dodatkowe właściwości przekazywane przez rodzica – w tym przypadku używamy ich do dynamicznego ustawienia placeholdera.
    • ref: referencja, którą później przekażemy do inputa.

Krok 2: Tworzymy komponent Parent

Teraz przejdźmy do komponentu rodzica (Parent). Tutaj obsłużymy ref, ustawimy placeholder i dodamy przycisk, który po kliknięciu ustawi focus na inpucie w dziecku.

Co warto zauważyć?

  • useRef: Używamy tego hooka, aby stworzyć ref (inputRef), który przechowuje odniesienie do elementu DOM (w tym przypadku inputa).
  • handleClick: Funkcja, która ustawia focus na inpucie.
  • Przekazanie props: Dodatkowo przekazujemy placeholder do komponentu Child, co pozwala rodzicowi kontrolować treść placeholdera w dziecku.

Krok 3: Integracja komponentów

Na koniec musimy połączyć oba komponenty w naszym głównym pliku:

Nadawanie nazw komponentom z forwardRef w React Developer Tools

Gdy używasz forwardRef, komponent może pojawić się jako „Anonymous” w narzędziach deweloperskich, co może utrudniać debugowanie.

Jest na to prosty sposób: możesz ustawić właściwość displayName dla swojego komponentu. Dzięki temu zyskasz czytelniejszą nazwę w React Developer Tools.

Przykład:

W powyższym kodzie dodaliśmy Child.displayName = 'InputComponent’;, co sprawia, że komponent w narzędziach deweloperskich wyświetli się jako „InputComponent” zamiast „Anonymous”.

Jest to szczególnie przydatne, gdy pracujesz nad większym projektem i chcesz łatwiej identyfikować swoje komponenty.

Podsumowanie - forwardRef to prosta i przydatna funkcja

ForwardRef to prosta, ale potężna funkcja, która otwiera nowe możliwości interakcji pomiędzy komponentami. W naszym przykładzie użyliśmy go, aby rodzic mógł kontrolować element DOM w dziecku – coś, co normalnie jest trudne do osiągnięcia w komponentach funkcyjnych.

Zastosowanie forwardRef nie zawsze jest konieczne, ale w sytuacjach, gdy trzeba bezpośrednio manipulować DOM-em w głębszych strukturach komponentów, może być naprawdę pomocne.

Mam nadzieję, że ten przykład pozwolił Ci lepiej zrozumieć, jak działa forwardRef. Teraz możesz go z łatwością używać w swoich projektach!

Jeśli pracujesz w Visual Studio Code, te wtyczki mogą znacząco ułatwić Ci życie – sprawdź, dlaczego!


Ewelina Kwiatkowska
Dzień zaczyna od kawy i linijki kodu, a gdy znika sprzed ekranu, z pewnością znajdziesz ją albo z patelnią w ręku w kuchni, albo z rakietką przy stole do ping-ponga.

Komentarze (0)

Gdy dodasz komentarz, potwierdzasz, że znasz i akceptujesz regulamin.
Administratorem danych jest x-kom sp. z o.o. w Częstochowie. Potrzebujemy Twoich danych, aby dodać komentarz. Zasady przetwarzania opisujemy tutaj.

Powiązane wpisy:

Jak uzyskać najlepszą jakość dźwięku w podcaście? Jak najlepiej nagrywać podcasty i czego używać?
Jak uzyskać najlepszą jakość dźwięku w podcaście? Jak… Nagrywanie podcastu może być świetną zabawą i pomysłem na dodatkowy…
Mikrofon pojemnościowy do wokalu – jaki kupić i jak go używać?
Mikrofon pojemnościowy do wokalu – jaki kupić i jak go… Mikrofon pojemnościowy to doskonałe narzędzie do rejestrowania głosu. Najlepiej sprawdzi…
Jak używać Midjourney do tworzenia obrazów generowanych przez sztuczną inteligencję?
Jak używać Midjourney do tworzenia obrazów generowanych… Czy kiedykolwiek marzyłeś o tym, aby z łatwością przelać obrazy…