Lifting State Up: Hur React Child-komponenter kommunicerar med föräldrar

React använder ett enkelriktat dataflöde från förälder till barn, aldrig från barn till förälder. Men vad händer när ett barn behöver kommunicera med sin förälder?

Lär dig hur du lyfter tillståndet för att tillåta en underordnad komponent att skicka data till en överordnad komponent.

Komponenter i React

React organiserar komponenter i en hierarki där underordnade komponenter kapslar inuti överordnade komponenter. Denna hierarki utgör byggstenarna i applikationens användargränssnitt.

</ParentComponent>

Varje underordnad komponent får data, känd som rekvisita, från sin överordnade komponent. React rekvisita kan innehålla olika typer av data som arrayer, objekt, strängar eller till och med funktioner. Den underordnade komponenten kan inte direkt manipulera denna data.

Tänk på följande komponent, kallad Motknapp:

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

Komponenten upprätthåller ett tillståndsvärde med namnet räkna som ökar varje gång en användare klickar på knappen.

Anta att du kapslade CounterButton-komponenten i en annan komponent som heter Home:

const Home = () => {
return (

 )
}

Om du vill visa räknevärdet från Motknapp komponent inuti Home-komponenten, skulle du stöta på en utmaning.

Som nämnts upprätthåller React ett enkelriktat dataflöde från förälder till barn. Därför kan CounterButton-komponenten inte direkt dela räknetillståndsvärdet med Home-komponenten.

För att komma runt detta måste du lyfta staten.

Hur man lyfter tillstånd för att dela data mellan komponenter

Lyfttillstånd hänvisar till att flytta en komponents tillstånd högre upp i komponentträdet, till en överordnad komponent. När du har lyft tillståndet kan du överföra det till underordnade komponenter som prop-värden.

I räknarexemplet från tidigare skulle du behöva flytta räknetillståndet och handtagInkrement funktion till Home-komponenten. Du skulle då behöva skicka handleIncrement-funktionen till CounterButton-komponenten som en prop.

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

{count}</p>
 )
}

Därefter måste du modifiera CounterButton-komponenten för att acceptera handleIncrement-funktionen och anropa den när en användare klickar på knappen.

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

Lyfta staten centraliserar uppgifterna och överför ansvaret för förvalta staten från barnet till föräldern.

Förutom att hjälpa dig att visa data i den överordnade komponenten, kan ett lyft av status hjälpa dig att synkronisera data över flera komponenter.

Anta att du hade en sidhuvuds- och sidfotskomponent kapslad inuti den överordnade komponenten och var och en av dessa komponenter visar också det delade antalet. För att dela detta värde kan du skicka det till dessa komponenter som rekvisita.

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



 )
}

Du måste dock vara försiktig med att lyfta tillståndet för att inte hamna i en situation som kallas propsborrning.

The Prop Drilling Challenge

När din applikation växer kan du upptäcka att flera komponenter djupare i komponentträdet behöver tillgång till ett delat tillstånd. För att göra detta delade tillstånd tillgängligt för de kapslade komponenterna, måste du skicka rekvisita genom mellanliggande komponenter. Denna process kan leda till propellborrning.

Stödborrning gör det svårt att spåra hur data flödar och kan leda till kod som är svår att underhålla.

För att minska propellborrning men ändå dela data från olika komponenter, överväg att använda React-kontext. React context låter dig centralisera tillståndet så att det är tillgängligt i hela applikationen.

Dela data i React med hjälp av rekvisita

När du behöver dela data från en underordnad komponent med dess överordnade komponent, höj tillståndet till den överordnade komponenten och skicka sedan funktionen som uppdaterar tillståndet till den underordnade komponenten som rekvisita.

I fall där den underordnade komponenten är djupt kapslad i komponentträdet, använd ett tillståndshanteringsverktyg som React Context eller ett tredjepartsverktyg som React Redux för att förhindra propellborrning.