Stăpânirea props și PropTypes în React

Recuzitele și PropTypes vă derutează? Nu esti singur. Vă voi ghida prin tot ce se referă la props și PropTypes. Ele vă pot face viața mult mai ușoară atunci când dezvoltați aplicații React. Acest tutorial vă va prezenta detaliile despre recuzită, transmiterea și accesarea recuzitei și transmiterea informațiilor către orice componentă folosind recuzită.

Construirea aplicațiilor React presupune defalcarea interfeței de utilizare în mai multe componente, ceea ce implică faptul că va trebui să transmitem date de la o componentă la alta. Recuzitele sunt un mecanism important pentru transmiterea de informații între componentele React și le vom analiza în detaliu. Acest articol ar fi incomplet fără a căuta în PropTypes, deoarece acestea asigură că componentele utilizează tipul corect de date și transmit datele corecte.

Este întotdeauna o practică bună să validăm datele pe care le obținem ca elemente de recuzită folosind PropTypes. Veți învăța, de asemenea, despre integrarea PropTypes în React, verificarea tipurilor cu PropTypes și utilizarea defaultProps. La sfârșitul acestui tutorial, veți înțelege cum să utilizați în mod eficient elementele de recuzită și PropTypes. Este important să aveți deja cunoștințe de bază despre cum funcționează React.

Înțelegerea recuzitei

React ne permite să transmitem informații către componente folosind lucruri numite recuzită (prescurtare de la proprietăți). Deoarece React cuprinde mai multe componente, elementele de recuzită fac posibilă partajarea acelorași date între componentele care au nevoie de ele. Utilizează fluxul de date unidirecțional (componente de la părinte la copil). Cu toate acestea, cu o funcție de apel invers, este posibil să transferați recuzita înapoi de la un copil la o componentă părinte.

Aceste date pot veni sub diferite forme: numere, șiruri, matrice, funcții, obiecte etc. Putem transmite elemente de recuzită oricărei componente, la fel cum putem declara atribute în orice etichetă HTML. Aruncă o privire la codul de mai jos:

 <PostList posts={postsList} />

În acest fragment, transmitem o reclamă numită posts unei componente numită PostList . Această reclamă are valoarea {postsList} . Să dezvăluim cum să accesăm și să transmitem date.

Trecerea și accesarea elementelor de recuzită

Pentru a face acest tutorial interesant, haideți să creăm o aplicație care să arate o listă cu numele și postările utilizatorilor. Demo-ul aplicației este prezentat mai jos:

Aplicația cuprinde colecții de componente: o componentă App , o componentă PostList și o componentă Post .

Lista postărilor va necesita date precum content și name utilizatorului. Putem construi datele astfel:

 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", }, ];

După aceasta, avem nevoie de componenta App pentru a extrage datele, Iată structura de bază a acelei componente:

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

Aici, transmitem o serie de postări ca suport la PostList (pe care o vom crea în curând). Componenta părinte, PostList , va accesa datele din postsList , care vor fi transmise ca elemente de recuzită posts către componenta secundară ( Post ). Dacă vă amintiți, aplicația noastră cuprinde trei componente, pe care le vom crea pe măsură ce continuăm.

Să creăm 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> ); } }

Componenta PostList va primi posts ca prop. Apoi, va trece prin bucla prin prop posts , this.props.posts , pentru a returna fiecare articol postat ca componentă Post (pe care o vom modela mai târziu). De asemenea, rețineți utilizarea key în fragmentul de mai sus. Pentru cei nou la React, o cheie este un identificator unic atribuit fiecărui articol din lista noastră, permițându-ne să distingem între articole. În acest caz, cheia este id -ul fiecărei postări. Nu există nicio șansă ca două elemente să aibă același id , așa că este o bucată bună de date de utilizat în acest scop.

Între timp, proprietățile rămase sunt transmise ca elemente de recuzită componentei Post ( <Post {...post} /> ).

Deci, să creăm componenta Post și să folosim elementele de recuzită din ea:

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

Construim componenta Post ca o componentă funcțională, în loc să o definim ca o componentă de clasă, așa cum am făcut-o pentru componenta PostList . Am făcut acest lucru pentru a vă arăta cum să accesați elementele de recuzită într-o componentă funcțională, în comparație cu modul în care le accesăm într-o componentă de clasă cu this.props . Deoarece aceasta este o componentă funcțională, putem accesa valorile folosind elemente de props .

Am învățat acum cum să transmitem și să accesăm recuzită și, de asemenea, cum să transmitem informații de la o componentă la alta. Să ne gândim acum cum funcționează recuzita cu funcțiile.

Funcții de trecere prin recuzită

În secțiunea precedentă, am trecut o serie de date ca elemente de recuzită de la o componentă la alta. Dar dacă lucrăm cu funcții în schimb? React ne permite să trecem funcții între componente. Acest lucru este util atunci când dorim să declanșăm o schimbare a stării într-o componentă părinte din componenta sa fiu. Recuzitele ar trebui să fie imuabile; nu ar trebui să încercați să schimbați valoarea unei prop. Trebuie să faceți asta în componenta care o transmite, care este componenta părinte.

Să creăm o aplicație demonstrativă simplă care ascultă un eveniment de clic și schimbă starea aplicației. Pentru a schimba starea aplicației într-o componentă diferită, trebuie să transmitem funcția noastră la componenta a cărei stare trebuie să se schimbe. În acest fel, vom avea o funcție în componenta noastră copil care este capabilă să schimbe starea.

Sună puțin complex? Am creat o aplicație React simplă care își schimbă starea cu un clic pe un buton și redă o informație de bun venit:

În demonstrația de mai sus, avem două componente. Una este componenta App , care este componenta părinte care conține starea aplicației și funcția de setare a stării. Componenta ChildComponent va fi copilul în acest scenariu, iar sarcina sa este de a reda informațiile binevenite atunci când starea se schimbă.

Să împărțim asta în cod:

 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> ); } }

Observați că ne-am setat starea la true , iar metoda de modificare a stării este creată în componenta App . În funcția render() , transmitem starea aplicației, ca prop isShow , componentei ChildComponent . De asemenea, transmitem funcția toggleShow() ca un suport numit clickMe .

Vom folosi acest lucru în ChildComponent care arată astfel:

 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> ); } }

Cel mai important lucru de mai sus este că componenta App transmite o funcție ca suport la ChildComponent . Funcția clickMe() este utilizată pentru gestionarea clicurilor în ChildComponent , în timp ce ChildComponent nu cunoaște logica funcției - declanșează funcția doar atunci când se face clic pe butonul. Starea este schimbată atunci când funcția este apelată și, odată ce starea s-a schimbat, starea este transmisă din nou ca suport. Toate componentele afectate, precum copilul în cazul nostru, vor reda din nou.

Trebuie să transmitem starea aplicației, isShow , ca o prop la ChildComponent , deoarece fără ea, nu putem scrie logica de mai sus pentru a afișa greeting atunci când starea este actualizată.

Acum că ne-am uitat la funcții, să trecem la validare. Este întotdeauna o practică bună să validăm datele pe care le obținem prin elemente de recuzită folosind PropTypes. Să ne aprofundăm în asta acum.

Ce sunt PropTypes în React?

PropTypes sunt un mecanism pentru a se asigura că componentele utilizează tipul corect de date și transmit datele potrivite și că componentele folosesc tipul corect de recuzită și că componentele care primesc elementele de recuzită primesc tipul corect de recuzită.

Ne putem gândi la asta ca la un cățel livrat la un magazin de animale de companie. Magazinul de animale de companie nu vrea porci, lei, broaște sau geckos - vrea căței. PropTypes se asigură că tipul de date corect (cățeluș) este livrat magazinului de animale de companie, și nu alt fel de animal.

În secțiunea de mai sus, am văzut cum să transmitem informații oricărei componente folosind recuzită. Am trecut recuzită direct ca atribut al componentei și am trecut și recuzita din afara componentei și le-am folosit în acea componentă. Dar nu am verificat ce tip de valori primim în componenta noastră prin recuzită sau că totul funcționează în continuare.

Depinde de noi dacă să validăm datele pe care le obținem într-o componentă prin elemente de recuzită. Dar într-o aplicație complexă, este întotdeauna o practică bună să validați datele respective.

Folosind PropTypes

Pentru a folosi PropTypes, trebuie să adăugăm pachetul ca dependență la aplicația noastră prin npm sau Yarn, rulând următorul cod în linia de comandă. Pentru npm:

 npm install --save prop-types

Și pentru fire:

 yarn add prop-types

Pentru a folosi PropTypes, mai întâi trebuie să importam PropTypes din pachetul prop-types:

 import PropTypes from 'prop-types';

Să folosim ProTypes în aplicația noastră care listează postările utilizatorilor. Iată cum îl vom folosi pentru componenta Post :

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

Aici, PropTypes.string și PropTypes.number sunt validatori de prop care pot fi utilizați pentru a vă asigura că elementele de recuzită primite sunt de tipul potrivit. În codul de mai sus, declarăm că id este un număr, în timp ce content și user trebuie să fie șiruri.

De asemenea, PropTypes sunt utile în prinderea erorilor. Și putem impune trecerea elementelor de recuzită folosind isRequired :

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

PropTypes au o mulțime de validatori. Iată câteva dintre cele mai comune:

 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 }

Sunt disponibile mai multe tipuri, pe care le puteți verifica în documentația React].

Recuzită implicită

Dacă vrem să transmitem câteva informații implicite componentelor noastre folosind elemente de recuzită, React ne permite să facem acest lucru cu ceva numit defaultProps . În cazurile în care PropTypes sunt opționale (adică nu folosesc isRequired ), putem seta defaultProps . Elementele de recuzită implicite asigură că elementele de recuzită au o valoare, în cazul în care nu trece nimic. Iată un exemplu:

 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> } }

Aici, defaultProps va fi folosit pentru a se asigura că this.props.name are o valoare, în cazul în care nu este specificată de componenta părinte. Dacă nu este transmis niciun nume clasei Profile , atunci aceasta va avea proprietatea implicită Stranger la care să se întoarcă. Acest lucru previne orice eroare atunci când nu trece nicio prop. Vă sfătuiesc să utilizați întotdeauna defaultProps pentru fiecare PropType opțional.

Concluzie

Sper că ți-a plăcut să lucrezi la acest tutorial. Sperăm că v-a arătat cât de importante sunt elementele de recuzită și propTypes pentru construirea aplicațiilor React, deoarece fără ele, nu am fi capabili să transmitem date între componente atunci când au loc interacțiuni. Ele sunt o parte esențială a arhitecturii bazate pe componente și de gestionare a stării în jurul căreia este proiectat React.

PropTypes sunt un bonus pentru a vă asigura că componentele utilizează tipul de date corect și transmit datele corecte și că componentele folosesc tipul potrivit de recuzită și că componentele care primesc elementele de recuzită primesc tipul corect de recuzită.

Dacă aveți întrebări, le puteți lăsa în secțiunea de comentarii de mai jos și voi fi bucuros să răspund la fiecare și să rezolv orice problemă cu dvs.

Referințe

• „Gândind în React”, React Docs
• „Lista și cheile”, React Docs
• „Verificarea tipului cu PropTypes”, React Docs
• „Cum se transmite elemente de recuzită la componente în React”, Robin Wieruch