Olukorra tõstmine: kuidas reageerivad lapse komponendid vanematega suhtlemisele

React kasutab ühesuunalist andmevoogu vanemalt lapsele, mitte kunagi lapselt vanemale. Mis saab aga siis, kui lapsel on vaja oma vanemaga suhelda?

Siit saate teada, kuidas olekut tõsta, et võimaldada alamkomponendil andmeid ülemkomponendile saata.

Reacti komponendid

React korraldab komponendid hierarhiasse, kus alamkomponendid pesitsevad vanemkomponentide sees. See hierarhia moodustab rakenduse kasutajaliidese ehitusplokid.

</ParentComponent>

Iga alamkomponent saab andmeid, mida nimetatakse rekvisiidideks, oma emakomponendilt. Reaktsioonirekvisiidid võivad sisaldada erinevat tüüpi andmeid, näiteks massiive, objekte, stringe või isegi funktsioone. Alamkomponent ei saa neid andmeid otseselt manipuleerida.

Vaatleme järgmist komponenti, nn CounterButton:

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

Komponent säilitab olekuväärtuse nimega loendama mis suureneb iga kord, kui kasutaja nuppu klõpsab.

Oletame, et pesasid CounterButtoni komponendi teise komponendi nimega Home:

const Home = () => {
return (

 )
}

Kui soovite kuvada loendi väärtust CounterButton komponendi Home sees, seisate silmitsi väljakutsega.

Nagu mainitud, jõustab React ühesuunalise andmevoo vanemalt lapsele. Seetõttu ei saa komponent CounterButton loendusoleku väärtust otse komponendiga Home jagada.

Sellest mööda saamiseks peate riigi üles tõstma.

Kuidas tõsta olekut, et komponentide vahel andmeid jagada

Tõstmisolek viitab komponendi oleku liigutamisele komponendipuust kõrgemale, emakomponendile. Kui olete oleku tõstnud, saate selle edasi anda tugiväärtustena alamkomponentidele.

Varasema loendurite näites peate teisaldama loendusoleku ja käepide juurdekasv funktsiooni Home komponendile. Seejärel peate andma käepideme lisamise funktsiooni CounterButtoni komponendile rekvisiidina.

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

{count}</p>
 )
}

Järgmiseks peate muutma komponenti CounterButton, et aktsepteerida funktsiooni HandIncrement ja seda kutsuda, kui kasutaja nuppu klõpsab.

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

Riigi tõstmine tsentraliseerib andmed ja kannab vastutuse üle riigi juhtimine lapselt vanemale.

Lisaks andmete kuvamisele emakomponendis võib oleku tõstmine aidata teil andmeid mitme komponendi vahel sünkroonida.

Oletame, et teil oli päise ja jaluse komponent, mis on pesastatud emakomponendi sees ja kõik need komponendid kuvavad ka jagatud arvu. Selle väärtuse jagamiseks saate selle nendele komponentidele rekvisiidina edasi anda.

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



 )
}

Siiski peate oleku tõstmisel olema ettevaatlik, et mitte sattuda olukorda, mida nimetatakse rekvisiitide puurimiseks.

Prop Drilling Challenge

Kui teie rakendus kasvab, võite avastada, et mitu komponentipuu sügavamal asuvat komponenti vajavad juurdepääsu jagatud olekule. Selle jagatud oleku pesastatud komponentidele kättesaadavaks tegemiseks peate rekvisiidid edastama vahekomponentide kaudu. See protsess võib viia tugipuurimiseni.

Prop puurimine muudab andmete liikumise jälgimise keeruliseks ja see võib viia raskesti hooldatava koodini.

Puurimise leevendamiseks, kuid siiski erinevate komponentide andmete jagamiseks, kaaluge Reacti konteksti kasutamist. Reaktsiooni kontekst võimaldab teil oleku tsentraliseerida nii, et see oleks saadaval kogu rakenduses.

Andmete jagamine Reaktsioonis Rekvisiitide abil

Kui teil on vaja jagada andmeid alamkomponendist selle ülemkomponendiga, tõstke olek ülemkomponendiks ja seejärel edastage olekut värskendav funktsioon alamkomponendile rekvisiidina.

Juhtudel, kui alamkomponent on komponendipuus sügavalt pesastatud, kasutage tugipuurimise vältimiseks olekuhaldustööriista, nagu React Context, või kolmanda osapoole tööriista, näiteks React Redux.