Wyświetlanie listy elementów to coś, co twórcy stron internetowych robią przez cały czas. React nie ma standardowego sposobu renderowania listy przedmiotów, jednak istnieją pewne wzorce, które z pewnością warto znać. Niektóre z nich omówimy w tym poście.

Tablica dzieci

Zacznijmy od podstawowego podejścia, które powinno działać w większości przypadków, czyli przekazania elementów listy w childrenprop.

Używam React.Children.map , więc nie muszę się martwić, czy childrenjest to pojedynczy element, czy tablica elementów. Zauważ, że ListViewkomponent jest odpowiedzialny za strukturę listy, w tym przykładzie potwierdza semantycznie poprawność uli liukład znaczników. Oto jak może wyglądać przykładowe użycie

Bardzo prosty, bardzo czytelny! Możesz również użyć tego podejścia, jeśli nie znasz z góry liczby elementów.

Pamiętaj tylko, że za każdym razem, gdy renderujesz listę, którą można zmienić lub przefiltrować, musisz podać kluczową właściwość (React ostrzeże Cię, jeśli tego nie zrobisz).

Renderuj prop

Drugie podejście jest bardziej elastyczne, ale też nieco bardziej złożone. Mówię o wzorcu render prop . Oto jak może wyglądać kod listy.

Być może zauważyłeś, że nie nadaje się do wielokrotnego użytku, ponieważ wyraźnie definiuje Itemtyp. Możemy zrobić lepiej, użyjmy TypeScript Generics, aby lista nie była połączona z konkretnym Iteminterfejsem.

Jest to o wiele lepsze, teraz będzie działać z dowolną tablicą przedmiotów, o ile każdy element spełnia wymagania AbstractIteminterfejsu. Zobaczmy, jak można to wykorzystać.

Zauważ, że TypeScript prawidłowo interesuje typ elementu w rendererfunkcji.

Dlaczego więc wzorzec renderowania jest mocniejszy? Ma dostęp do surowych danych o elementach, a nie tylko węzły reakcji, jak w poprzednim podejściu. Może to mieć wiele przypadków użycia. Jako przykład mogę podać predykat, który będzie używany do filtrowania elementów przed ich wyświetleniem.

Klient może określić dowolny filterFn, który akceptuje pojedynczy element i zwraca wartość logiczną.

W tym przykładzie zostaną wyrenderowane tylko dwa pierwsze elementy.

Streszczenie

Przedstawiłem kilka podstawowych cegiełek, które można dostosować do bardziej konkretnych potrzeb. Mam nadzieję, że okażą się przydatne, dziękuję za przeczytanie!