Lifting State Up: kā reaģē bērnu komponenti, sazinoties ar vecākiem

React izmanto vienvirziena datu plūsmu no vecākiem uz bērnu, nekad no bērna uz vecāku. Bet kas notiek, kad bērnam ir jāsazinās ar savu vecāku?

Uzziniet, kā atcelt stāvokli, lai ļautu pakārtotajam komponentam sūtīt datus vecākkomponentam.

Sastāvdaļas programmā React

React organizē komponentus hierarhijā, kurā pakārtotie komponenti atrodas vecāku komponentos. Šī hierarhija veido lietojumprogrammas lietotāja saskarnes pamatelementus.

</ParentComponent>

Katrs pakārtotais komponents saņem datus, kas pazīstami kā rekvizīti, no sava vecākkomponenta. Reakcijas rekvizīti var saturēt dažāda veida datus, piemēram, masīvus, objektus, virknes vai pat funkcijas. Pakārtotais komponents nevar tieši manipulēt ar šiem datiem.

Apsveriet šādu komponentu, ko sauc CounterButton:

const CounterButton = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count + 1)
 }
return (
Increment</button>
 )
}

Komponents uztur stāvokļa vērtību ar nosaukumu skaitīt kas palielinās katru reizi, kad lietotājs noklikšķina uz pogas.

Pieņemsim, ka CounterButton komponents ir ievietots citā komponentā ar nosaukumu Home:

const Home = () => {
return (

 )
}

Ja vēlaties parādīt skaitīšanas vērtību no CounterButton komponentu Home komponentā, jūs saskarsities ar izaicinājumu.

Kā minēts, React nodrošina vienvirziena datu plūsmu no vecākiem uz bērnu. Tāpēc komponents CounterButton nevar tieši koplietot skaitīšanas stāvokļa vērtību ar Home komponentu.

Lai to apietu, jums ir jāpaceļ valsts.

Kā paaugstināt stāvokli, lai koplietotu datus starp komponentiem

Pacelšanas stāvoklis attiecas uz komponenta stāvokļa pārvietošanu augstāk komponentu kokā uz vecāku komponentu. Kad esat pacēlis statusu, varat to nodot pakārtotajiem komponentiem kā atbalsta vērtības.

Iepriekšējā skaitītāja piemērā jums ir jāpārvieto skaitīšanas stāvoklis un rokturisPieaugums funkciju Home komponentam. Pēc tam jums būs jānodod handIncrement funkcija komponentam CounterButton kā atbalsts.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (

{count}</p>
 )
}

Pēc tam jums ir jāmaina komponents CounterButton, lai pieņemtu HandIncrement funkciju un izsauktu to, kad lietotājs noklikšķina uz pogas.

const CounterButton = ({handleIncrement}) => {
return (
Increment</button>
 )
}

Valsts pacelšana centralizē datus un nodod atbildību par pārvaldīt valsti no bērna uz vecāku.

Stāvokļa pacelšana ne tikai palīdz parādīt datus vecākkomponentā, bet arī var palīdzēt sinhronizēt datus vairākos komponentos.

Pieņemsim, ka galvenā komponenta iekšpusē ir ligzdots galvenes un kājenes komponents, un katrs no šiem komponentiem parāda arī kopīgoto skaitu. Lai kopīgotu šo vērtību, varat to nodot šiem komponentiem kā rekvizītus.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (



 )
}

Tomēr jums ir jābūt uzmanīgiem, paceļot stāvokli, lai nenonāktu situācijā, kas pazīstama kā balsta urbšana.

Prop Drilling Challenge

Lietojumprogrammai augot, iespējams, atklājat, ka vairākiem komponentiem, kas atrodas dziļāk komponentu kokā, ir nepieciešama piekļuve koplietotajam stāvoklim. Lai padarītu šo koplietojamo stāvokli pieejamu ligzdotajiem komponentiem, jums ir jānodod rekvizīti caur starpposma komponentiem. Šis process var novest pie balsta urbšanas.

Prop urbšana apgrūtina datu plūsmas izsekošanu un var radīt grūti uzturējamu kodu.

Lai mazinātu balsta urbšanu, bet joprojām koplietotu datus no dažādiem komponentiem, apsveriet iespēju izmantot React kontekstu. Reakcijas konteksts ļauj centralizēt stāvokli, lai tas būtu pieejams visā lietojumprogrammā.

Datu kopīgošana reakcijā, izmantojot rekvizītus

Ja jums ir nepieciešams koplietot datus no pakārtotā komponenta ar tā vecākkomponentu, paaugstiniet stāvokli uz vecākkomponentu, pēc tam nododiet funkciju, kas atjaunina stāvokli pakārtotajam komponentam, kā rekvizītus.

Gadījumos, kad pakārtotais komponents ir dziļi ligzdots komponentu kokā, izmantojiet stāvokļa pārvaldības rīku, piemēram, React Context, vai trešās puses rīku, piemēram, React Redux, lai novērstu atbalsta urbšanu.