Állapot emelése: Hogyan reagálnak a gyermekkomponensek a szülőkkel való kommunikációra

A React egyirányú adatfolyamot használ szülőtől gyermekig, soha nem gyermektől szülőig. De mi történik, ha a gyermeknek kommunikálnia kell a szülőjével?

Ismerje meg, hogyan szüntesse meg az állapotot, hogy lehetővé tegye az alárendelt összetevő számára, hogy adatokat küldjön a szülőkomponensnek.

A React összetevői

A React egy hierarchiába rendezi az összetevőket, ahol a gyermekkomponensek a szülőkomponensek belsejébe ágyazódnak. Ez a hierarchia képezi az alkalmazás felhasználói felületének építőköveit.

</ParentComponent>

Minden egyes alárendelt komponens a szülőkomponensétől kap adatokat, az úgynevezett kellékeket. A React kellékek különféle típusú adatokat tartalmazhatnak, például tömböket, objektumokat, karakterláncokat vagy akár függvényeket. A gyermekkomponens nem tudja közvetlenül manipulálni ezeket az adatokat.

Tekintsük a következő, ún CounterButton:

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





instagram viewer
return (
Increment</button>
 )
}

A komponens egy elnevezésű állapotértéket tart fenn számol amely minden alkalommal növekszik, amikor a felhasználó a gombra kattint.

Tegyük fel, hogy a CounterButton összetevőt egy másik, Home nevű összetevőbe ágyazta be:

const Home = () => {
return (

 )
}

Ha meg akarta jeleníteni a számértéket a CounterButton a Home komponensen belül, akkor kihívásba ütközik.

Amint már említettük, a React egyirányú adatáramlást kényszerít ki a szülőtől a gyermekig. Ezért a CounterButton összetevő nem oszthatja meg közvetlenül a számlálási állapot értékét a Home komponenssel.

Ennek megkerüléséhez fel kell emelni az államot.

Az állapot emelése az adatok megosztásához az összetevők között

Az emelési állapot egy komponens állapotának feljebb helyezését jelenti a komponensfában, egy szülőkomponenshez. Miután felemelte az állapotot, átadhatja azt a leszármazott összetevőknek prop értékként.

A korábbi számláló példában át kell helyeznie a számlálási állapotot és a handIncrement funkciót a Home komponenshez. Ezután át kell adnia a handleIncrement függvényt a CounterButton komponensnek támaszként.

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

{count}</p>
 )
}

Ezután módosítania kell a CounterButton komponenst, hogy elfogadja a handleIncrement függvényt, és meghívja azt, amikor a felhasználó rákattint a gombra.

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

Az állam feloldása központosítja az adatokat és áthárítja a felelősséget az állam irányítása a gyerektől a szülőig.

Amellett, hogy segít az adatok megjelenítésében a szülőkomponensben, az állapot feloldása segíthet az adatok szinkronizálásában több összetevő között.

Tegyük fel, hogy van egy Fejléc és Lábléc komponens beágyazva a szülőkomponensbe, és ezek az összetevők mindegyike megjeleníti a megosztott számlálást is. Ennek az értéknek a megosztásához kellékként átadhatja ezeknek az összetevőknek.

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



 )
}

Azonban óvatosnak kell lennie az állapot felemelésével, hogy ne kerüljön a támasztékfúrásnak nevezett helyzetbe.

A Prop Drilling Challenge

Ahogy az alkalmazás növekszik, előfordulhat, hogy az összetevőfában mélyebben lévő több összetevőnek hozzáférésre van szüksége egy megosztott állapothoz. Ahhoz, hogy ez a megosztott állapot elérhető legyen a beágyazott összetevők számára, át kell adnia a kellékeket közvetítő összetevőkön. Ez a folyamat támasztékfúráshoz vezethet.

A támasztékfúrás megnehezíti az adatáramlás nyomon követését és nehezen karbantartható kódhoz vezethet.

Ha csökkenteni szeretné a támasztékfúrást, de továbbra is megoszthatja az adatokat az összetevők között, fontolja meg a React kontextus használatát. A React kontextus lehetővé teszi az állapot központosítását, hogy az a teljes alkalmazásban elérhető legyen.

Adatok megosztása In React segítségével Props

Ha meg kell osztania az utódkomponens adatait a szülőkomponenssel, emelje az állapotot a szülőkomponensre, majd adja át az állapotot frissítő függvényt az alárendelt összetevőnek kellékként.

Azokban az esetekben, amikor az alárendelt összetevő mélyen be van ágyazva az összetevőfába, használjon állapotkezelő eszközt, például a React Contextet, vagy egy harmadik féltől származó eszközt, például a React Reduxot, hogy megakadályozza a támasztékfúrást.