Opanowanie rekwizytów i typów proptype w React

Czy rekwizyty i PropType Cię dezorientują? Nie jesteś sam. Przeprowadzę Cię przez wszystko na temat rekwizytów i PropTypes. Mogą znacznie ułatwić Ci życie podczas tworzenia aplikacji React. Ten samouczek wprowadzi cię w szczegóły dotyczące rekwizytów, przekazywania i uzyskiwania dostępu do rekwizytów oraz przekazywania informacji do dowolnego komponentu za pomocą rekwizytów.

Budowanie aplikacji React obejmuje rozbicie interfejsu użytkownika na kilka komponentów, co oznacza, że ​​będziemy musieli przekazywać dane z jednego komponentu do drugiego. Rekwizyty są ważnym mechanizmem przekazywania informacji między komponentami React i przyjrzymy się im bardzo szczegółowo. Ten artykuł byłby niekompletny bez zapoznania się z PropTypes, ponieważ zapewniają one, że komponenty używają prawidłowego typu danych i przekazują właściwe dane.

Dobrą praktyką jest zawsze sprawdzanie poprawności danych, które otrzymujemy jako props przy użyciu PropTypes. Dowiesz się również o integrowaniu PropTypes w React, sprawdzaniu typów z PropTypes i używaniu defaultProps. Pod koniec tego samouczka zrozumiesz, jak efektywnie korzystać z props i PropTypes. Ważne jest, abyś miał już podstawową wiedzę na temat działania Reacta.

Zrozumienie rekwizytów

React pozwala nam na przekazywanie informacji do komponentów za pomocą rzeczy zwanych rekwizytami (skrót od właściwości). Ponieważ React składa się z kilku komponentów, rekwizyty umożliwiają współdzielenie tych samych danych przez komponenty, które ich potrzebują. Wykorzystuje jednokierunkowy przepływ danych (składniki rodzic-dziecko). Jednak dzięki funkcji zwrotnej możliwe jest przekazanie właściwości z powrotem od elementu potomnego do komponentu rodzica.

Dane te mogą przybierać różne formy: liczb, łańcuchów, tablic, funkcji, obiektów itp. Możemy przekazać props do dowolnego komponentu, tak jak możemy deklarować atrybuty w dowolnym znaczniku HTML. Spójrz na poniższy kod:

 <PostList posts={postsList} />

W tym fragmencie przekazujemy właściwość o nazwie posts do komponentu o nazwie PostList . Ta właściwość ma wartość {postsList} . Zróbmy podział, jak uzyskać dostęp do danych i przekazywać je.

Przekazywanie i uzyskiwanie dostępu do rekwizytów

Aby ten samouczek był interesujący, stwórzmy aplikację wyświetlającą listę nazwisk i postów użytkowników. Demo aplikacji pokazano poniżej:

Aplikacja zawiera kolekcje komponentów: komponent App , komponent PostList i komponent Post .

Lista postów będzie wymagała podania danych, takich jak content i name użytkownika. Dane możemy skonstruować w następujący sposób:

 const postsList = [ { id: 1, content: "The world will be out of the pandemic soon", user: "Lola Lilly", }, { id: 2, content: "I'm really exited I'm getting married soon", user: "Rebecca Smith", }, { id: 3, content: "What is your take on this pandemic", user: "John Doe", }, { id: 4, content: "Is the world really coming to an end", user: "David Mark", }, ];

Następnie potrzebujemy komponentu App do pobrania danych. Oto podstawowa struktura tego komponentu:

 const App = () => { return ( <div> <PostList posts={postsList} /> </div> ); };

Tutaj przekazujemy tablicę postów jako rekwizyt do PostList (którą utworzymy za chwilę). Komponent nadrzędny, PostList , uzyska dostęp do danych z postsList , które zostaną przekazane jako props posts do komponentu potomnego ( Post ). Jeśli pamiętasz, nasza aplikacja składa się z trzech komponentów, które będziemy tworzyć w miarę postępów.

Stwórzmy PostList :

 class PostList extends React.Component { render() { return ( <React.Fragment> <h1>Latest Users Posts</h1> <ul> {this.props.posts.map((post) => { return ( <li key={post.id}> <Post {...post} /> </li> ); })} </ul> </React.Fragment> ); } }

Komponent PostList otrzyma posts jako jego właściwość. Następnie przejdzie przez właściwość posts , this.props.posts , aby zwrócić każdy opublikowany element jako komponent Post (który zamodelujemy później). Zwróć też uwagę na użycie key w powyższym fragmencie. Dla tych, którzy są nowicjuszami w React, klucz jest unikalnym identyfikatorem przypisanym do każdego elementu na naszej liście, co pozwala nam odróżnić elementy. W tym przypadku kluczem jest id każdego posta. Nie ma szans, aby dwa elementy miały ten sam id , więc jest to dobra część danych do wykorzystania w tym celu.

Tymczasem pozostałe właściwości są przekazywane jako rekwizyty do komponentu Post ( <Post {...post} /> ).

Stwórzmy więc komponent Post i wykorzystajmy w nim rekwizyty:

 const Post = (props) => { return ( <div> <h2>{props.content}</h2> <h4>username: {props.user}</h4> </div> ); };

Konstruujemy komponent Post jako komponent funkcjonalny, zamiast definiować go jako komponent klasy, jak zrobiliśmy to dla komponentu PostList . Zrobiłem to, aby pokazać, jak uzyskać dostęp do props w komponencie funkcjonalnym, w porównaniu do tego, jak uzyskujemy do nich dostęp w komponencie klasy za pomocą this.props . Ponieważ jest to komponent funkcjonalny, możemy uzyskać dostęp do wartości za pomocą props .

Nauczyliśmy się teraz, jak przekazywać i uzyskiwać dostęp do rekwizytów, a także jak przekazywać informacje z jednego komponentu do drugiego. Zastanówmy się teraz, jak rekwizyty współpracują z funkcjami.

Przekazywanie funkcji za pomocą rekwizytów

W poprzedniej sekcji przekazaliśmy tablicę danych jako właściwości z jednego komponentu do drugiego. Ale co, jeśli zamiast tego pracujemy z funkcjami? React pozwala nam przekazywać funkcje między komponentami. Jest to przydatne, gdy chcemy wywołać zmianę stanu w komponencie nadrzędnym z jego komponentu podrzędnego. Rekwizyty mają być niezmienne; nie powinieneś próbować zmieniać wartości właściwości. Musisz to zrobić w komponencie, który go przekazuje, czyli w komponencie nadrzędnym.

Utwórzmy prostą aplikację demonstracyjną, która nasłuchuje zdarzenia kliknięcia i zmienia stan aplikacji. Aby zmienić stan aplikacji w innym komponencie, musimy przekazać naszą funkcję do komponentu, którego stan musi się zmienić. W ten sposób będziemy mieli funkcję w naszym komponencie potomnym, która może zmieniać stan.

Brzmi trochę skomplikowanie? Stworzyłem prostą aplikację React, która zmienia stan jednym kliknięciem i wyświetla informację powitalną:

W powyższym demie mamy dwa komponenty. Jednym z nich jest składnik App , który jest składnikiem nadrzędnym, który zawiera stan aplikacji i funkcję do ustawienia stanu. ChildComponent będzie w tym scenariuszu elementem podrzędnym, a jego zadaniem jest wyświetlenie informacji powitalnej w przypadku zmiany stanu.

Podzielmy to na kod:

 class App extends React.Component { constructor(props) { super(props); this.state = { isShow: true, }; } toggleShow = () => { this.setState((state) => ({ isShow: !state.isShow })); }; render() { return ( <div> <ChildComponent isShow={this.state.isShow} clickMe={this.toggleShow} /> </div> ); } }

Zauważ, że ustawiliśmy nasz stan na true , a metoda zmiany stanu została utworzona w komponencie App . W funkcji render() przekazujemy stan aplikacji, jako prop isShow , do komponentu ChildComponent . Przekazujemy również funkcję toggleShow() jako właściwość o nazwie clickMe .

Użyjemy tego w ChildComponent , który wygląda tak:

 class ChildComponent extends React.Component { clickMe = () => { this.props.clickMe(); }; render() { const greeting = "Welcome to React Props"; return ( <div style={{ textAlign: "center", marginTop: "8rem" }}> {this.props.isShow ? ( <h1 style={{ color: "green", fontSize: "4rem" }}>{greeting}</h1> ) : null} <button onClick={this.clickMe}> <h3>click Me</h3> </button> </div> ); } }

Najważniejszą rzeczą powyżej jest to, że komponent App przekazuje funkcję jako właściwość do ChildComponent . Funkcja clickMe() jest używana do obsługi kliknięć w ChildComponent , podczas gdy ChildComponent nie zna logiki funkcji — wyzwala funkcję tylko wtedy, gdy przycisk zostanie kliknięty. Stan zmienia się, gdy funkcja jest wywoływana, a gdy stan się zmieni, stan jest ponownie przekazywany jako właściwość. Wszystkie dotknięte elementy, takie jak dziecko w naszym przypadku, zostaną ponownie wyrenderowane.

Musimy przekazać stan aplikacji, isShow , jako właściwość ChildComponent , ponieważ bez tego nie możemy napisać powyższej logiki, aby wyświetlić greeting , gdy stan zostanie zaktualizowany.

Teraz, gdy przyjrzeliśmy się funkcjom, przejdźmy do walidacji. Dobrą praktyką jest zawsze sprawdzanie poprawności danych, które otrzymujemy poprzez props przy użyciu PropTypes. Przejdźmy teraz do tego.

Czym są PropTypes w React?

PropTypes to mechanizm zapewniający, że komponenty używają właściwego typu danych i przekazują właściwe dane oraz że komponenty używają właściwego typu właściwości, a komponenty odbierające otrzymują właściwy typ właściwości.

Możemy myśleć o tym jak o szczeniaku dostarczanym do sklepu zoologicznego. Sklep zoologiczny nie chce świń, lwów, żab ani gekonów — potrzebuje szczeniąt. PropTypes zapewniają, że właściwy typ danych (szczeniak) jest dostarczany do sklepu zoologicznego, a nie innego rodzaju zwierzęcia.

W powyższej sekcji widzieliśmy, jak przekazać informacje do dowolnego komponentu za pomocą rekwizytów. Przekazaliśmy rekwizyty bezpośrednio jako atrybut do komponentu, a także przekazaliśmy rekwizyty spoza komponentu i użyliśmy ich w tym komponencie. Ale nie sprawdziliśmy, jakie wartości otrzymujemy w naszym komponencie przez props lub czy wszystko nadal działa.

Całkowicie zależy od nas, czy zweryfikować dane, które otrzymujemy w komponencie za pomocą rekwizytów. Ale w złożonej aplikacji zawsze dobrą praktyką jest sprawdzanie poprawności tych danych.

Korzystanie z PropTypes

Aby skorzystać z PropTypes, musimy dodać pakiet jako zależność do naszej aplikacji przez npm lub Yarn, uruchamiając następujący kod w wierszu poleceń. Dla npm:

 npm install --save prop-types

A dla przędzy:

 yarn add prop-types

Aby użyć PropTypes, musimy najpierw zaimportować PropTypes z pakietu prop-types:

 import PropTypes from 'prop-types';

Użyjmy ProTypes w naszej aplikacji, która wyświetla posty użytkowników. Oto, jak użyjemy go w komponencie Post :

 Post.proptypes = { id: PropTypes.number, content: PropTypes.string, user: PropTypes.string }

W tym PropTypes.string i PropTypes.number to walidatory właściwości, których można użyć do upewnienia się, że otrzymane właściwości są właściwego typu. W powyższym kodzie deklarujemy id jako liczbę, podczas gdy content i user mają być ciągami.

Również PropTypes są przydatne w łapaniu błędów. I możemy wymusić przekazywanie rekwizytów za pomocą isRequired :

 Post.proptypes = { id: PropTypes.number.isRequired, content: PropTypes.string.isRequired, user: PropTypes.string.isRequired }

PropTypes mają wiele walidatorów. Oto niektóre z najczęstszych:

 Component.proptypes = { stringProp: PropTypes.string, // The prop should be a string numberProp: PropTypes.number, // The prop should be a number anyProp: PropTypes.any, // The prop can be of any data type booleanProp: PropTypes.bool, // The prop should be a function functionProp: PropTypes.func // The prop should be a function arrayProp: PropTypes.array // The prop should be an array }

Dostępnych jest więcej typów, które możesz sprawdzić w dokumentacji Reacta].

Domyślne rekwizyty

Jeśli chcemy przekazać niektóre domyślne informacje do naszych komponentów za pomocą props, React pozwala nam to zrobić za pomocą czegoś, co nazywa defaultProps . W przypadkach, w których PropTypes są opcjonalne (to znaczy nie używają isRequired ), możemy ustawić defaultProps . Domyślne właściwości zapewniają, że właściwości mają wartość na wypadek, gdyby nic nie zostało przekazane. Oto przykład:

 Class Profile extends React.Component{ // Specifies the default values for props static defaultProps = { name: 'Stranger' }; // Renders "Welcome, Stranger": render() { return <h2> Welcome, {this.props.name}<h2> } }

W tym defaultProps zostanie użyty, aby upewnić się, że this.props.name ma wartość, na wypadek gdyby nie została określona przez komponent nadrzędny. Jeśli żadna nazwa nie zostanie przekazana do klasy Profile , będzie ona miała domyślną właściwość Stranger , do której będzie można się odwołać. Zapobiega to wszelkim błędom, gdy nie przekazano żadnej właściwości. Radzę zawsze używać defaultProps dla każdego opcjonalnego PropType.

Wniosek

Mam nadzieję, że praca z tym samouczkiem Ci się podobała. Mamy nadzieję, że pokazało to, jak ważne są props i propTypes w tworzeniu aplikacji React, ponieważ bez nich nie bylibyśmy w stanie przekazywać danych między komponentami podczas interakcji. Stanowią one rdzeń architektury opartej na komponentach i zarządzaniu stanem, wokół której zaprojektowano React.

PropTypes to premia za zapewnienie, że komponenty używają właściwego typu danych i przekazują właściwe dane oraz że komponenty używają właściwego typu właściwości, a komponenty otrzymujące otrzymują właściwy typ właściwości.

Jeśli masz jakieś pytania, możesz je zostawić w sekcji komentarzy poniżej, a z przyjemnością odpowiem na każde z nich i rozwiążę z Tobą wszelkie problemy.

Bibliografia

• „Myślenie w reakcji”, React Docs
• „Lista i klucze”, React Docs
• „Sprawdzanie typu za pomocą PropTypes”, React Docs
• „Jak przekazać rekwizyty do komponentów w reakcji”, Robin Wieruch