Ściąga z typami React w TypeScript z wyszukiwarką: propsy, children, useState, zdarzenia, refy, context, reducery i komponenty generyczne, każdy z kodem do skopiowania.
W React z TypeScript najczęściej typujesz propsy komponentu, a resztą zajmuje się inferencja. Opisz propsy interfejsem, użyj React.ReactNode dla children, przekaż argument typu do useState, gdy wartość początkowa jest zbyt wąska, i wybieraj typy zdarzeń, takie jak React.ChangeEvent<HTMLInputElement>, dla handlerów. Pliki z JSX mają rozszerzenie .tsx.
Najczęściej używane typy
Wyszukaj w ściądze to, co próbujesz otypować, na przykład handler kliknięcia albo ref, i skopiuj linijkę. Dalej znajdziesz dłuższe przykłady dla contextu, reducerów i komponentów generycznych.
Dodaj children: React.ReactNode do interfejsu propsów. ReactNode obejmuje ciągi znaków, liczby, elementy, tablice i null. Używaj React.ReactElement tylko wtedy, gdy komponent musi otrzymać pojedynczy element JSX.
Pusta tablica nie daje kompilatorowi niczego do wywnioskowania. Przekaż typ elementu: useState<string[]>([]). To samo dotyczy wartości początkowych null, jak w useState<User | null>(null).
Wywołaj useRef<HTMLInputElement>(null) i podepnij go przez ref={inputRef}. Odczytuj inputRef.current ze sprawdzeniem null, bo ma wartość null, dopóki React nie zamontuje elementu, i ponownie po jego odmontowaniu.
Aktualna dokumentacja React pokazuje komponent funkcyjny, który otrzymuje ref jako zwykły prop i umieszcza go na wewnętrznym elemencie. Otypuj ten prop jako React.Ref<HTMLInputElement>. Starszy kod zamiast tego opakowuje komponent w forwardRef.
Gdy nie ma sensownej wartości domyślnej, użyj createContext<Value | null>(null) i opakuj useContext w mały hook, który rzuca błąd, jeśli wartość to null. Każdy konsument dostaje wtedy typ bez null i czytelny błąd, gdy brakuje providera.
Opcjonalne propsy dostają wartości domyślne w sygnaturze; children przyjmuje wszystko, co da się wyrenderować.
Hook rzuca czytelny błąd poza providerem i zwraca wartość różną od null wewnątrz niego.
W każdym case akcja jest zawężona, więc action.item istnieje tylko tam, gdzie powinien.
T jest ustalany przez elementy przekazane przez wywołującego, więc renderItem otrzymuje właściwy typ.
Rodzic tworzy ref; dziecko umieszcza go na prawdziwym polu input.
Props
Obiekt propsów
Props
Children dowolnego rodzaju
Props
Tylko jeden element jako dziecko
Props
Wariant ograniczony do kilku wartości
Props
Przekazanie natywnych propsów przycisku
Props
Prop stylu
Props
Prop z callbackiem
State
Stan liczbowy (wywnioskowany)
State
Stan, który może być null
State
Stan z pustą tablicą
State
Unia statusów
State
Setter przekazany jako prop
Events
Zmiana w polu tekstowym
Events
Zmiana w polu select
Events
Kliknięcie przycisku
Events
Wysłanie formularza
Events
Naciśnięcie klawisza
Events
Typ całego handlera
Refs
Ref do elementu DOM
Refs
Ref przechowujący id timera
Refs
Ref otrzymany jako prop
Context
Context bez wartości domyślnej
Reducer
Unia akcji
Wszystkie
Propsy
Stan
Zdarzenia
Refy
Context
Reducer
Szukaj w ściądze
event, ref, children...
Filtruj według grupy
Kopiuj
Pokazano {n} z {v} wierszy
Brak pasujących wierszy. Spróbuj krótszego słowa.
Zacznij za darmo · Bez karty kredytowej