de Dheeraj DeeKay

Cum să actualizezi o componentă proprie în ReactJS – oh da, este posibil

Dacă ați citit documentele oficiale React (și ar trebui, deoarece este o resursă excelentă pe React), ați observa aceste linii:

Fie că declarați o componentă ca funcție sau clasă, nu trebuie să-și modifice niciodată propriile accesorii.
React este destul de flexibil, dar are o singură regulă strictă:
Toate componentele React trebuie să acționeze ca niște funcții pure în raport cu recuzita lor.

Accesoriile nu trebuie actualizate niciodată. Trebuie să le folosim așa cum este. Sună rigid nu? Dar React își are motivele în spatele acestei reguli și sunt destul de convins de raționamentul lor. Singura avertisment este, totuși, că există situații în care s-ar putea să trebuiască să inițiem actualizarea unui prop. Și în curând vom ști cum.

Luați în considerare următoarea linie de cod dintr-o componentă părinte:

<MyChild childName={this.state.parentName} />

Aceasta este o linie simplă, pe care fiecare Dev React o cunoaște probabil. Apelați la componenta copil. În timp ce faceți acest lucru, treceți și starea părintelui (parentName) copilului. În componenta copil, această stare va fi accesată ca this.props.childName. Destul de corect.

Acum, dacă este necesară o schimbare de nume, parentName va fi modificată la părinte și această modificare va fi comunicată automat copilului, așa cum este cazul mecanismului React. Această configurare funcționează în majoritatea scenariilor.

Dar ce se întâmplă dacă trebuie să actualizați elementul de sprijin al componentei copil, iar cunoștințele despre schimbarea necesară și declanșatorul schimbării acesteia sunt cunoscute doar de copil? Având în vedere modalitățile de reacție, datele pot curge doar de sus în jos, adică de la părinte la copil. Deci, cum trebuie să comunicăm părintelui că este necesară o schimbare în prop?

Ei bine, deși acest lucru este anti-model și nu este recomandat, dezvoltatorii care au scris limba ne-au acoperit. Surprinde!

O putem face cu Callbacks. Știu, nicio surpriză acolo! Se pare că sunt utile pentru fiecare problemă cu care ne confruntăm aici. Bine, bine, acum cum?

Cum sa actualizezi o componenta proprie in ReactJS oh

Imaginați-vă dacă apelul de mai sus către copil a fost modificat în acest fel:

<MyChild childName={this.state.parentName} onNameChange={this.onChange} />

Acum pe lângă un prop childName copilul nostru nevoiaș are și un eveniment numit onNameChange expus. Aceasta este modalitatea de a rezolva problema. Copilul nostru și-a făcut partea. Acum este rândul părinților să facă ceea ce este necesar. Și nu trebuie să se agite. Tot ce trebuie să facă este să definească o funcție onChange la fel de

function onChange(newName) {   this.setState({ parentName: newName });}

Asta este. Acum, oricând și oriunde în componenta copilului dorim să actualizăm parentName prop, tot ce trebuie să facem este să sunăm `this.props.onNameChange(' My New name') și voilà! Vei avea ceea ce îți dorești. Asta este. Gata și prăfuită.

Sper că a fost ușor de înțeles. Spuneți-mi în comentarii despre orice dificultăți sau diferite moduri în care ar fi putut fi ușurată. Mulțumiri.

Inca un lucru.

React argumentează împotriva acestui lucru și au destulă dreptate în acest sens. Acesta este anti-model. Deci, ori de câte ori vă confruntați cu o astfel de situație, verificați dacă ați putea ridica starea sau dacă există vreo modalitate de a vă descompune componenta. S-ar putea să pară puțin obositor, dar să știți că așa ar trebui să fie în React!

Codificare fericită.