Lifting State Up: Hvordan React Child-komponenter kommuniserer med foreldre

React bruker en enveis dataflyt fra forelder til barn, aldri fra barn til forelder. Men hva skjer når et barn trenger å kommunisere med sine foreldre?

Finn ut hvordan du løfter tilstanden for å tillate en underordnet komponent å sende data til en overordnet komponent.

Komponenter i React

React organiserer komponenter i et hierarki der underordnede komponenter ligger i overordnede komponenter. Dette hierarkiet danner byggesteinene i applikasjonens brukergrensesnitt.

</ParentComponent>

Hver underordnede komponent mottar data, kjent som rekvisitter, fra sin overordnede komponent. React-rekvisitter kan inneholde ulike typer data som matriser, objekter, strenger eller til og med funksjoner. Den underordnede komponenten kan ikke direkte manipulere disse dataene.

Tenk på følgende komponent, kalt Motknapp:

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

Komponenten opprettholder en tilstandsverdi med navn telle som øker hver gang en bruker klikker på knappen.

Anta at du nestet CounterButton-komponenten i en annen komponent kalt Home:

const Home = () => {
return (

 )
}

Hvis du ønsket å vise telleverdien fra Motknapp komponent inne i Home-komponenten, vil du møte en utfordring.

Som nevnt håndhever React en ensrettet dataflyt fra forelder til barn. Derfor kan CounterButton-komponenten ikke dele telletilstandsverdien direkte med Home-komponenten.

For å komme rundt dette må du løfte staten opp.

Hvordan løfte staten opp for å dele data mellom komponenter

Løftetilstand refererer til å flytte en komponents tilstand høyere opp i komponenttreet, til en overordnet komponent. Når du løfter tilstanden, kan du overføre den til underordnede komponenter som propverdier.

I tellereksemplet fra tidligere, må du flytte telletilstanden og handleInkrement funksjon til Home-komponenten. Du må da sende handleIncrement-funksjonen til CounterButton-komponenten som en prop.

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

{count}</p>
 )
}

Deretter må du endre CounterButton-komponenten for å godta handleIncrement-funksjonen og kalle den når en bruker klikker på knappen.

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

Å løfte staten sentraliserer dataene og overfører ansvaret for styre staten fra barnet til forelderen.

I tillegg til å hjelpe deg med å vise data i den overordnede komponenten, kan heving av tilstanden hjelpe deg med å synkronisere data på tvers av flere komponenter.

Anta at du hadde en topptekst- og bunntekst-komponent nestet inne i den overordnede komponenten, og hver av disse komponentene viser også det delte antallet. For å dele denne verdien kan du sende den til disse komponentene som rekvisitter.

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



 )
}

Du må imidlertid være forsiktig med å løfte staten for ikke å havne i en situasjon kjent som propellboring.

The Prop Drilling Challenge

Etter hvert som applikasjonen din vokser, kan du finne ut at flere komponenter dypere i komponenttreet trenger tilgang til en delt tilstand. For å gjøre denne delte tilstanden tilgjengelig for de nestede komponentene, må du sende rekvisitter gjennom mellomkomponenter. Denne prosessen kan føre til propellboring.

Prop boring gjør det vanskelig å spore hvordan data flyter og kan føre til kode som er vanskelig å vedlikeholde.

For å redusere propellboring, men likevel dele data fra på tvers av komponenter, bør du vurdere å bruke React-kontekst. React-kontekst lar deg sentralisere staten slik at den er tilgjengelig i hele applikasjonen.

Dele data i reaksjon ved hjelp av rekvisitter

Når du trenger å dele data fra en underordnet komponent med dens overordnede komponent, heve tilstanden til den overordnede komponenten og deretter sende funksjonen som oppdaterer tilstanden til den underordnede komponenten som rekvisitter.

I tilfeller der den underordnede komponenten er dypt nestet i komponenttreet, bruk et tilstandsadministrasjonsverktøy som React Context eller et tredjepartsverktøy som React Redux for å forhindre propellboring.