Lifting State Up: Hvordan React Child-komponenter kommunikerer med forældre

React bruger et envejs dataflow fra forælder til barn, aldrig fra barn til forælder. Men hvad sker der, når et barn skal kommunikere med sin forælder?

Lær, hvordan du ophæver tilstanden for at tillade en underordnet komponent at sende data til en overordnet komponent.

Komponenter i React

React organiserer komponenter i et hierarki, hvor underordnede komponenter ligger inde i overordnede komponenter. Dette hierarki danner byggestenene i applikationens brugergrænseflade.

</ParentComponent>

Hver underordnede komponent modtager data, kendt som rekvisitter, fra sin overordnede komponent. React-rekvisitter kan indeholde forskellige typer data såsom arrays, objekter, strenge eller endda funktioner. Den underordnede komponent kan ikke direkte manipulere disse data.

Overvej følgende komponent, kaldet Modknap:

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

Komponenten bevarer en tilstandsværdi med navn tælle som øges hver gang en bruger klikker på knappen.

Antag, at du indlejrede CounterButton-komponenten i en anden komponent ved navn Home:

const Home = () => {
return (

 )
}

Hvis du ønskede at vise tælleværdien fra Modknap komponent inde i Home-komponenten, vil du støde på en udfordring.

Som nævnt håndhæver React et ensrettet dataflow fra forælder til barn. Derfor kan CounterButton-komponenten ikke direkte dele tælletilstandsværdien med Home-komponenten.

For at komme uden om dette, skal du løfte staten op.

Sådan løftes tilstanden op for at dele data mellem komponenter

Løftetilstand refererer til at flytte en komponents tilstand højere op i komponenttræet til en overordnet komponent. Når du har løftet tilstanden, kan du overføre den til underordnede komponenter som propværdier.

I tællereksemplet fra tidligere skal du flytte tælletilstanden og handleInkrement funktion til Home-komponenten. Du skal derefter overføre handleIncrement-funktionen til CounterButton-komponenten som en prop.

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

{count}</p>
 )
}

Dernæst skal du ændre CounterButton-komponenten for at acceptere handleIncrement-funktionen og kalde den, når en bruger klikker på knappen.

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

Ophævelse af staten centraliserer dataene og overfører ansvaret for styre staten fra barnet til forælderen.

Udover at hjælpe dig med at vise data i den overordnede komponent, kan en ophævelse af tilstanden hjælpe dig med at synkronisere data på tværs af flere komponenter.

Antag, at du havde en sidehoved- og sidefodskomponent indlejret i den overordnede komponent, og hver af disse komponenter viser også det delte antal. For at dele denne værdi kan du videregive den til disse komponenter som rekvisitter.

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



 )
}

Du skal dog være forsigtig med at løfte staten for ikke at ende i en situation kendt som propboring.

The Prop Drilling Challenge

Efterhånden som din applikation vokser, vil du måske opdage, at flere komponenter dybere i komponenttræet har brug for adgang til en delt tilstand. For at gøre denne delte tilstand tilgængelig for de indlejrede komponenter, skal du sende rekvisitter gennem mellemliggende komponenter. Denne proces kan føre til propboring.

Propboring gør det svært at spore, hvordan data flyder og kan føre til kode, der er svær at vedligeholde.

For at mindske propboring, men stadig dele data fra på tværs af komponenter, kan du overveje at bruge React-kontekst. React-kontekst giver dig mulighed for at centralisere staten, så den er tilgængelig på tværs af hele applikationen.

Deling af data i React ved hjælp af rekvisitter

Når du skal dele data fra en underordnet komponent med dens overordnede komponent, skal du hæve tilstanden til den overordnede komponent og derefter videregive funktionen, der opdaterer tilstanden til den underordnede komponent som rekvisitter.

I tilfælde, hvor den underordnede komponent er dybt indlejret i komponenttræet, skal du bruge et tilstandsstyringsværktøj som React Context eller et tredjepartsværktøj såsom React Redux for at forhindre propboring.